.BlogPostBoxImage { border-radius:12px; overflow:hidden; } 
.BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTTitle { margin-top:0; } 
.BlogPostBackBtn { margin-bottom: 24px; } 
.BlogPostAuthorSec { width:100%; }
.BlogPostTagMetaSec, .BlogPostMeta ul, .BlogPostMeta ul  li { display:flex;  align-items: center; gap:10px;}
.BlogPostSocialRtCol ul { margin-top:12px; } 
.BlogPostSocialRtCol ul li a:hover { background:#0E1930; }
.BlogPostSocialRtCol ul li a:hover svg path  { fill:#FFF; } 
.BlogPostTagMetaSec { margin-top:24px; } 
.BlogPostMeta, .BlogPostTagSec { margin-top:0px;  }
.BlogPostMeta { color:#0E193C; } 
.BlogPostAuthorSec .BlogPostAuthorimg { width: 64px;    height: 64px; } 
.BlogPostAuthorshare a.authorname { font-size:16px; } 
.BlogPostAuthorshare { color:#0E193C; font-weight:600;  } 
.BlogPostSocialRtCol { text-align:left; margin-top:24px; } 
.BlogPostSocialRtCol p { text-align:left; } 
.authsvg svg path { stroke:#0E193C; } 
.authsvg svg {   width:20px; }
.BlogPostBoxFAQBoxMain  blockquote {    border-left: 10px solid #ccdbff;    font-size: 20px;}
.BlogPostBoxshortcntsec { background: none;    border-radius: 0;    padding: 18px; } 
.BlogPostTwoColBoxSec .BlogPostTwoColBox .BlogPostTCLTCol .BlogPostBoxshortSec {     margin-top: 30px;    background: none;    border-top: 1px solid #0E193C;    border-bottom: 1px solid #0E193C;
    border-radius: 0;    padding: 24px 0; }
.BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTBoxSec .BlogPostTCRTBox {  -webkit-transition: all ease 0.3s;    position: relative; border:2px solid #FFF;   border-radius:12px;    padding:20px;    background:#FFF; height:auto; }
.BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTBoxSec .BlogPostTCRTBox:before { display:none; } 
.BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTBoxSec .BlogPostTCRTBox:hover .BlogPostTCRTBoxTitle p {  color:#004BFF; -webkit-transition: all ease 0.3s;  } 
.BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTBoxSec .BlogPostTCRTBox .BlogPostTCRTBoxTag li {  background: #ccdbff; }
.BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTBoxSec .BlogPostTCRTBox .BlogPostTCRTBoxTag ul { display:flex; gap:5px; flex-wrap:wrap; } 
.BlogPostAuthorSec .BlogPostAuthorLtCol { max-width:100%; } 
.BlogPostAuthorSec .BlogPostAuthorLtCol .BlogPostAuthorDetailsMain { display:flex; justify-content:space-between;     width: calc(100% - 78px); align-items:center;  } 
.BlogPostAuthorDetailsMain .authorshare {    border: 1px solid #0e193c;    color: #0e193c;    display: flex;    white-space: nowrap;    min-width: fit-content;    border-radius: 50px;
    justify-content: center;    align-items: center;       padding: 10px 15px;    white-space: nowrap;    height: fit-content;}
.BlogPostAuthorDetailsMain .authorshare  span {font-weight:400; font-size:14px; } 
.BlogPostAuthorDetailsMain .authorshare svg {     max-width: 60px;    width: 60px;    margin-left: 5px; } 
.BlogPostAuthorDetailsMain .authorshare:hover { color:#FFF; background:#0e193c;  } 
.BlogPostAuthorDetailsMain .authorshare:hover svg path { fill:#FFF !important; } 
.BlogPostTCLTCol .InlineCTABlock { padding:50px; border-radius:12px; background:#ccdbff; margin-top:70px; } 
.BlogPostTCLTCol .InlineCTABlock .cta-section {  display: flex;    justify-content: center;    align-items: center;    flex-direction: column;    text-align: center;    gap: 30px;} 
.BlogPostTCLTCol .InlineCTABlock .InlineCTABlockSubtitle { margin-top:14px;  }
.BlogPostTCLTCol .InlineCTABlock .InlineCTABlockHeading { max-width:600px; margin-left:auto; margin-right:auto; } 
.BlogPostBoxFAQBoxTitle h2 {    font-size: 20px;    line-height: 1.3; }

/* ---------- Google preferred source panel (design treatment 2b) ---------- */
.BlogPostSection .sc-gps {
  margin-top: 48px;
  background: #FFF;
  border: 1px solid #D9DFEC;
  border-radius: 10px;
  overflow: hidden;
}
.BlogPostSection .sc-gps__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 18px;
  background: #F7F9FE;
  border-bottom: 1px solid #E4E9F4;
}
.BlogPostSection .sc-gps__mark {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.BlogPostSection .sc-gps__g {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.BlogPostSection .sc-gps__eyebrow {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #5A6480;
}
.BlogPostSection .sc-gps__logo {
  height: 14px;
  width: auto;
  display: block;
  flex: 0 0 auto;
  opacity: .9;
}
.BlogPostSection .sc-gps__body {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 24px 26px;
}
.BlogPostSection .sc-gps__copy {
  flex: 1 1 360px;
  min-width: min(320px, 100%);
}
/* Type comes from the theme (h6 / body p) — only spacing and the muted
   supporting-copy colour are set here. */
.BlogPostSection .sc-gps__heading {
  margin: 0 0 8px;
}
.BlogPostSection .sc-gps__text {
  margin: 0;
  color: #5A6480;
}

/* Button is the theme's global primary button (.button a) — radius, padding,
   type and colours all come from theme settings. Layout only below. */
.BlogPostSection .sc-gps__cta {
  flex: 0 0 auto;
}
.BlogPostSection .sc-gps__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  white-space: nowrap;
}
.BlogPostSection .sc-gps__arrow {
  line-height: 1;
}

@media screen and (max-width:600px) {
  .BlogPostSection .sc-gps { margin-top: 32px; }
  .BlogPostSection .sc-gps__bar { padding: 10px 14px; gap: 12px; }
  .BlogPostSection .sc-gps__body { padding: 20px; gap: 20px; }
  .BlogPostSection .sc-gps__cta { width: 100%; }
  .BlogPostSection .sc-gps__cta a { width: 100%; }
}

@media screen and (max-width:991px) {
  .BlogPostTwoColBoxSec.pt30 { padding-top:0; }
  .BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTBoxSec .BlogPostTCRTBox {     padding: 30px 40px; }
  .BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTBoxSec .BlogPostTCRTBox .BlogPostTCRTBoxTitle { margin-top:12px; }
  .BlogPostSocialRtCol ul {        justify-content: flex-start;  }
  .BlogPostTagMetaSec { flex-wrap:wrap;  }
  .BlogPostAuthorshare a.authorname, .BlogPostAuthorshare, .BlogPostMeta {    font-size: 14px;}
  .BlogPostAuthorSec .BlogPostAuthorimg {    height: 54px;    width: 54px;}
  .BlogPostAuthorSec .BlogPostAuthorLtCol .BlogPostAuthorDetailsMain {  width: calc(100% - 68px); }
  .BlogPostAuthorDetailsMain .authorshare span { display:none; }
  .BlogPostBoxFAQBoxMain  iframe { max-width:100%; width:100%; aspect-ratio:16/9; }
  .BlogPostBoxFAQBoxCnt:has(table) {    overflow-x: auto;    overflow-y: hidden;}
  .BlogPostBoxFAQBoxTitle h2 {  font-size: 18px; }
}

/* ===========================================================================
   CVR ROUTES REDESIGN
   Everything below is scoped under `.sc-cvr`, which the module always emits.
   Two-class selectors (0,2,0) beat the theme's plain `.BlogPost*` rules, so
   `!important` is only used where the theme itself uses it or where HubSpot
   injects later in the cascade.

   The `--sc-*` / `--np-*` design tokens do NOT exist in the portal theme CSS,
   so they are declared here — on `.sc-cvr` rather than `:root` so they cannot
   leak into the other modules on the page.
   =========================================================================== */
.sc-cvr {
  /* blue */
  --sc-blue-50:  #E6EEFF;
  --sc-blue-100: #C2D2FF;
  --sc-blue-200: #8AA7FF;
  --sc-blue-300: #4D7BFF;
  --sc-blue-400: #1B4BF6;
  --sc-blue-500: #004BFF;
  --sc-blue-600: #0040E0;
  --sc-blue-700: #032E96;
  --sc-blue-900: #0F193D;
  /* neutrals */
  --sc-gray-50:  #F0F3F8;
  --sc-gray-100: #E3E8F0;
  --sc-gray-200: #C9D2DF;
  --sc-gray-300: #A8B3C4;
  --sc-gray-400: #7B8699;
  --sc-gray-500: #56607A;
  --sc-gray-600: #3D475F;
  --sc-gray-700: #2A3349;
  --sc-paper:    #F6F8FB;
  /* On-brand accent for eyebrows and decorative tints on dark grounds.
     (Mint/green is deliberately absent: the live site reserves --sc-green
     #23CCA2 for status dots only.) */
  --cvr-on-dark-accent: #C2D2FF;   /* --sc-blue-100 */
  /* Gracie */
  --np-gracie-indigo: #5063D2;
  --np-gracie-gradient: linear-gradient(90deg,#51B3D1 0%,#5063D2 33.6%,#A45ACC 66.8%,#DA5597 100%);
  /* Elevation — the sitewide convention is a navy-based shadow, rgba(14,25,60,α),
     as used across sc0726 on the new homepage. */
  --sc-shadow-sm: 0 2px 8px rgba(14,25,60,.06);
  --sc-shadow-md: 0 6px 18px rgba(14,25,60,.14);
  --sc-shadow-lg: 0 18px 55px rgba(14,25,60,.08);
  --sc-shadow-focus: 0 0 0 3px rgba(0,75,255,.35);

  /* CTA background art. These two are the core brand grounds; an editor can
     replace either per CTA with the Background image field. The gradient is the
     fallback and also sits underneath as background-color, so the copy stays
     legible if an image fails to load. */
  --cvr-bg-dark: url("https://www.surecloud.com/hubfs/bg-img-gracie-swoosh-dark-003%20(1).webp");
  --cvr-bg-blue: url("https://www.surecloud.com/hubfs/Assets%20-%20SureCloud%202026/sc2026_homepage_hero.jpg");
  --cvr-bg-gradient: linear-gradient(135deg, var(--sc-blue-700), var(--sc-blue-500));
  /* Left-weighted scrim so text over photography keeps contrast. */
  --cvr-cta-scrim: linear-gradient(100deg, rgba(3,46,150,.94) 0%, rgba(3,46,150,.72) 48%, rgba(3,46,150,.28) 100%);

  /* Radius — theme tokens are --sc-radius-small 12px / --sc-radius-standard 24px;
     the new homepage puts every button at a 50px pill. */
  --cvr-radius-card: 16px;
  --cvr-radius-pill: 50px;

  /* Brand palette as the theme declares it on :root, for the tints below. */
  --cvr-brand-grey: #EFF1FF;   /* --sc-grey */
  --cvr-brand-med: #4D65CD;    /* --sc-med-blue */
  --cvr-brand-navy: #0E193C;   /* --sc-navy */
  --cvr-panel: #F4F5FC;        /* --sc0726-panel */

  /* Fonts are already live in the portal theme (IBM Plex Sans + Bauhaus Desk
     Display), so these only alias them — no webfont loading needed. */
  --sc-font-body: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  --sc-font-display: 'Bauhaus Desk Display', 'Inter', 'Helvetica Neue', system-ui, sans-serif;

  /* Category accent. Overridden per article by the style-tab field via an
     inline `--cvr-accent`; falls back to SureBlue. */
  --cvr-accent: var(--sc-blue-500);
}

/* ---------------------------------------------------------------------------
   Unblock position:sticky.

   sc2026_theme-overrides.css sets `.body-container-wrapper { overflow-x: hidden }`
   at the top level. `overflow-x: hidden` makes that element a scroll container,
   so it becomes the rail's nearest scrolling ancestor — and because it never
   scrolls vertically, the sticky rail simply travels with the page instead of
   pinning. This is the whole reason the rail would not stick.

   `clip` does the same visual job (no horizontal overflow) WITHOUT creating a
   scroll container, so sticky works again. It is safe to declare unscoped here:
   HubSpot only serves a module's CSS on pages that actually contain the module,
   so this cannot reach the rest of the site. Browsers without `overflow: clip`
   ignore the declaration and fall back to today's behaviour.
   --------------------------------------------------------------------------- */
.body-container-wrapper {
  overflow-x: clip;
}

/* ---------- shared bits ---------- */
.sc-cvr .sc-cvr__eyebrow {
  font-family: var(--sc-font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sc-blue-500);
  margin-bottom: 8px;
}

.sc-cvr .sc-cvr__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  padding: 0 20px;
  font-family: var(--sc-font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  /* Sitewide button shape: a 50px pill (sc0726 sets this !important on every
     .button / .cta_button on the new homepage). */
  border-radius: var(--cvr-radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s cubic-bezier(.65,0,.35,1), color .2s cubic-bezier(.65,0,.35,1);
}
.sc-cvr .sc-cvr__btn--arrow::after { content: "\2192"; font-family: var(--sc-font-display); font-weight: 600; font-size: 15px; }
.sc-cvr .sc-cvr__btn--block { width: 100%; }
.sc-cvr .sc-cvr__btn--sm { height: 36px; padding: 0 16px; font-size: 13px; }
.sc-cvr .sc-cvr__btn--primary { background: var(--sc-blue-500); color: #fff; }
.sc-cvr .sc-cvr__btn--primary:hover { background: var(--sc-blue-600); color: #fff; }
.sc-cvr .sc-cvr__btn--ghost { background: transparent; color: var(--sc-blue-900); border-color: var(--sc-gray-200); }
.sc-cvr .sc-cvr__btn--ghost:hover { background: var(--sc-blue-50); color: var(--sc-blue-900); }
.sc-cvr .sc-cvr__btn--white { background: #fff; color: var(--sc-blue-600); }
.sc-cvr .sc-cvr__btn--white:hover { background: rgba(255,255,255,.9); color: var(--sc-blue-600); }
.sc-cvr .sc-cvr__btn--gracie { background: #fff; color: var(--np-gracie-indigo); }
.sc-cvr .sc-cvr__btn--gracie:hover { background: rgba(255,255,255,.92); color: var(--np-gracie-indigo); }
.sc-cvr .sc-cvr__btn:focus-visible { outline: none; box-shadow: var(--sc-shadow-focus); }

/* The theme's own button classes still render at 20px (base) / 24px (sc2026)
   because this page has no .sc0726-page scope. Pill them inside the variant so
   the GPS panel, the strong CTA and any rich-text button match the rest. */
.sc-cvr .button a,
.sc-cvr a.button,
.sc-cvr a.cta_button,
.sc-cvr .cta_button,
.sc-cvr .hs-button,
.sc-cvr input[type="submit"] {
  border-radius: var(--cvr-radius-pill) !important;
}

/* ---------- ⑦ reading progress ---------- */
.sc-cvr .sc-cvr__progress {
  position: sticky;
  top: var(--header-dt-height, 108px);
  z-index: 35;
  height: 3px;
  background: var(--sc-gray-100);
}
.sc-cvr .sc-cvr__progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--cvr-accent);
  transition: width .12s linear;
}

/* ---------- breadcrumb (supersedes the back button) ---------- */
.sc-cvr .sc-cvr__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--sc-font-body);
  font-size: 13px;
  color: var(--sc-gray-500);
  margin-bottom: 16px;
}
.sc-cvr .sc-cvr__crumb a { color: var(--sc-gray-500); text-decoration: none; }
.sc-cvr .sc-cvr__crumb a:hover { color: var(--sc-blue-500); }
.sc-cvr .sc-cvr__crumb-sep { color: var(--sc-gray-300); }
.sc-cvr .sc-cvr__crumb-cur { color: var(--sc-blue-900); font-weight: 500; }
.sc-cvr .BlogPostBackBtn { display: none; }

/* ---------- hero + meta ---------- */
.sc-cvr .BlogPostBoxImage { border-radius: var(--cvr-radius-card); overflow: hidden; margin-bottom: 22px; }
.sc-cvr .BlogPostBoxImage img { display: block; width: 100%; height: auto; }

.sc-cvr .BlogPostTagMetaSec { margin-top: 0; margin-bottom: 14px; gap: 14px; }
.sc-cvr .BlogPostTagSec ul { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.sc-cvr .BlogPostTagSec ul li {
  font-family: var(--sc-font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  padding: 6px 12px;
  /* Sitewide pill: the theme puts blog tags at 12px, but every tag on the new
     homepage (e.g. .sc0726-trust-big__analyst-tag) is a 50px pill. */
  border-radius: var(--cvr-radius-pill);
  background: color-mix(in srgb, var(--cvr-accent) 14%, #fff);
  color: color-mix(in srgb, var(--cvr-accent) 72%, #000);
  list-style: none;
  margin: 0;
}
/* Fallback for engines without color-mix() — tinted neutral rather than nothing. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .sc-cvr .BlogPostTagSec ul li { background: var(--sc-blue-50); color: var(--sc-blue-700); }
}
.sc-cvr .BlogPostMeta { color: var(--sc-gray-500); font-size: 13px; }
.sc-cvr .BlogPostMeta ul { margin: 0; padding: 0; list-style: none; }
.sc-cvr .authsvg svg path { stroke: var(--sc-gray-400); }

/* Weight 500 is the sitewide heading weight — the theme sets font-weight:500 on
   every one of h1–h6 in Bauhaus Desk Display. The design mock drew these at 700,
   which reads too heavy next to the rest of the site. */
.sc-cvr .BlogPostTitle h1 {
  font-family: var(--sc-font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 22px;
}

/* ---------- author ---------- */
/* The theme already renders this as a white card (background #fff + radius +
   padding); it just had no edge, so it floated on the white page. A light
   hairline gives it its outline. */
.sc-cvr .BlogPostAuthorSec {
  border: 1px solid var(--sc-gray-100);
  box-shadow: var(--sc-shadow-sm);
  margin-bottom: 22px;
}
.sc-cvr .BlogPostAuthorSec .BlogPostAuthorimg { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; }
.sc-cvr .BlogPostAuthorSec .BlogPostAuthorimg img { width: 100%; height: 100%; object-fit: cover; }
.sc-cvr .BlogPostAuthorshare { font-weight: 600; font-size: 14.5px; color: var(--sc-blue-900); }
.sc-cvr .sc-cvr__author-role { font-size: 12.5px; color: var(--sc-gray-500); margin-top: 2px; }

/* ---------- `In Short..` ---------- */
/* The theme rule is a 4-class selector, so this needs the `.sc-cvr` prefix to win. */
.sc-cvr .BlogPostTwoColBoxSec .BlogPostTwoColBox .BlogPostTCLTCol .BlogPostBoxshortSec {
  margin-top: 0;
  margin-bottom: 28px;
  background: var(--sc-blue-50);
  border: 0;
  border-radius: var(--cvr-radius-card);
  padding: 16px 18px;
}
.sc-cvr .BlogPostBoxshortTitle h6 {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--sc-blue-900);
  margin: 0;
}
.sc-cvr .BlogPostBoxshortcntsec { background: none; padding: 0; }
.sc-cvr .BlogPostBoxshortcnt { font-size: 13.5px; line-height: 1.6; color: var(--sc-gray-600); }

/* ---------- body ---------- */
/* The theme's pt59 / pt30 spacing utilities stack on top of the design's own
   heading margins (59 + 28 + 30 = a ~117px hole after `In Short..`), so they
   are zeroed here and the rhythm comes from the h2/p margins alone. */
.sc-cvr .BlogPostBoxFAQBoxMain.pt59 { padding-top: 0; }
.sc-cvr .BlogPostBoxFAQBoxCnt.pt30 { padding-top: 0; }
.sc-cvr .BlogPostBoxFAQBox:first-child .BlogPostBoxFAQBoxTitle h2 { margin-top: 0; }

.sc-cvr .BlogPostBoxFAQBoxCnt p { font-size: 15.5px; line-height: 1.68; color: var(--sc-gray-700); margin: 0 0 18px; }
/* Body subheads sit on the theme's h4 step (24px / 1.33 / weight 500). They stay
   <h2> for the document outline; only the visual step is dialled down. Switch
   `font-size` to 32px for the h3 step or 20px for h5 if a different weight of
   subhead is wanted — the whole scale is 500, so nothing here needs to be bold. */
.sc-cvr .BlogPostBoxFAQBoxTitle h2 {
  font-family: var(--sc-font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.33;
  letter-spacing: -.005em;
  color: var(--sc-blue-900);
  margin: 34px 0 14px;
}
.sc-cvr .BlogPostBoxFAQBoxCnt a { color: var(--sc-blue-500); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; font-weight: 500; }
.sc-cvr .BlogPostBoxFAQBoxCnt a:hover { color: var(--sc-blue-600); }
/* Scroll-margin so a TOC jump clears the fixed header. */
.sc-cvr .BlogPostBoxFAQBox { scroll-margin-top: calc(var(--header-dt-height, 108px) + 24px); }

/* ---------- two-column layout + sticky rail ---------- */
/* Keep the theme's 24px gap. Its column caps are computed around exactly that
   value — .BlogPostTCLTCol is max-width:849px and .BlogPostTCRTCol is
   max-width:calc(100% - 873px), and 873 = 849 + 24 — so a larger gap overflows
   the row and .d_flex's flex-wrap:wrap drops the rail below the article. The
   design's 38px is not worth re-deriving both caps for.
   nowrap so a future gap change fails visibly rather than silently wrapping. */
.sc-cvr .BlogPostTwoColBox { display: flex; flex-wrap: nowrap; gap: 24px; align-items: flex-start; }
.sc-cvr .BlogPostTCLTCol { min-width: 0; }
/* The WHOLE rail pins as one unit — TOC, side CTA, related cards and share
   together. Mixing a pinned block with in-flow siblings in one narrow column
   always makes them collide (whichever wins z-index either covers the cards or
   hides them), so the sticky sits on the column itself and everything travels
   with it.

   `align-self: flex-start` (not stretch): a sticky element needs to be shorter
   than its containing block to have any travel, so the column must size to its
   content, not to the row.

   No height cap or internal scroll: the Latest/Related cards moved out to the
   "Keep reading" band at the end of the article, so the rail is now only the
   TOC, side CTA and share row — short enough to pin whole. A capped rail with
   its own scrollbar reads as broken, so it is better to let a very long side
   CTA degrade into a normal pinned-but-clipped column than to hide content in
   a scroller nobody notices.

   `top` also has to be restated: the theme pairs its own sticky with
   `top: 180px`, which would drop the rail 180px down the page. */
.sc-cvr .BlogPostTwoColBox .BlogPostTCRTCol {
  min-width: 0;
  position: sticky;
  top: calc(var(--header-dt-height, 108px) + 16px);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Now purely a grouping box for the TOC + side CTA. The sticky moved up to the
   column, so this needs no positioning, z-index or background of its own —
   nothing scrolls past it any more. */
.sc-cvr .sc-cvr__stick {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sc-cvr .sc-cvr__stick:empty { display: none; }
/* The theme pulls this title up with margin-top:-48px and pushes the cards away
   with margin-bottom:24px. Both are neutralised so the heading sits with its
   list. */
.sc-cvr .BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTTitle { margin-top: 0; margin-bottom: 10px; }
.sc-cvr .BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTBoxSec { margin-top: 0; }
.sc-cvr .BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTBoxSec .BlogPostTCRTBox + * { margin-top: 12px; }
.sc-cvr .BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTTitle h6 {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 12px;
  color: var(--sc-blue-900);
}
.sc-cvr .BlogPostSocialRtCol { margin-top: 0; }

/* Related / latest article cards — light grey outline + shadow.
   The theme's own rule is a 5-class selector, so these need the same depth
   plus `.sc-cvr` to win. Card tags get the sitewide pill too (the theme has
   them at 12px). */
.sc-cvr .BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTBoxSec .BlogPostTCRTBox {
  background: #fff;
  border: 1px solid var(--sc-gray-100);
  border-radius: var(--cvr-radius-card);
  box-shadow: var(--sc-shadow-sm);
  transition: box-shadow .2s cubic-bezier(.65,0,.35,1), border-color .2s cubic-bezier(.65,0,.35,1);
}
.sc-cvr .BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTBoxSec .BlogPostTCRTBox:hover {
  border-color: var(--sc-gray-200);
  box-shadow: var(--sc-shadow-md);
}
.sc-cvr .BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTBoxSec .BlogPostTCRTBox .BlogPostTCRTBoxTag li {
  border-radius: var(--cvr-radius-pill);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}
.sc-cvr .BlogPostTwoColBox .BlogPostTCRTCol .BlogPostTCRTBoxSec .BlogPostTCRTBox .BlogPostTCRTBoxTitle p {
  font-weight: 600;
  line-height: 1.35;
}

/* ---------- ⑦ table of contents ---------- */
.sc-cvr .sc-cvr__toc {
  border: 1px solid var(--sc-gray-100);
  border-radius: var(--cvr-radius-card);
  padding: 14px 16px;
  background: #fff;
}
.sc-cvr .sc-cvr__toc-eb {
  font-family: var(--sc-font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sc-gray-400);
  margin-bottom: 8px;
}
.sc-cvr .sc-cvr__toc-lk {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--sc-gray-600);
  text-decoration: none;
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--sc-gray-100);
}
.sc-cvr .sc-cvr__toc-lk:hover { color: var(--sc-blue-500); border-color: var(--sc-blue-300); }
.sc-cvr .sc-cvr__toc-lk.is-active { color: var(--sc-blue-600); border-color: var(--cvr-accent); font-weight: 600; }

/* ---------- ① side CTA ---------- */
.sc-cvr .sc-cvr__side { position: relative; border-radius: var(--cvr-radius-card); padding: 18px; }
/* A post that carries its own sc2026_Blog_CTA_Sticky card keeps that one: the
   module's JS sets body.sc-blogcta-on once it has moved the card into this rail,
   so the standard side CTA steps aside instead of stacking a second sticky card. */
body.sc-blogcta-on .sc-cvr .sc-cvr__side { display: none; }
.sc-cvr .sc-cvr__side-eb { margin-bottom: 10px; }
.sc-cvr .sc-cvr__side-h { font-family: var(--sc-font-display); font-weight: 500; font-size: 20px; line-height: 1.2; margin: 0 0 8px; }
.sc-cvr .sc-cvr__side-p { font-size: 12.5px; line-height: 1.5; margin: 0 0 14px; }
.sc-cvr .sc-cvr__side-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sc-cvr .sc-cvr__side-row img { width: 30px; height: 30px; flex: none; }
.sc-cvr .sc-cvr__side-t { font-family: var(--sc-font-display); font-weight: 500; font-size: 18px; line-height: 1.2; }

/* Dark-ground presets: the heading is an <h3>, so the theme's navy h3 colour
   wins unless it is set explicitly. This is what left the Gracie headline
   black on the gradient. */
.sc-cvr .sc-cvr__side--gracie .sc-cvr__side-h,
.sc-cvr .sc-cvr__side--image .sc-cvr__side-h,
.sc-cvr .sc-cvr__side--flood .sc-cvr__side-h { color: #fff; }

/* B1 product tile — accent hairline on top, driven by the category accent */
.sc-cvr .sc-cvr__side--product {
  background: #fff;
  border: 1px solid var(--sc-gray-100);
  border-top: 4px solid var(--cvr-accent);
  box-shadow: var(--sc-shadow-sm);
}
.sc-cvr .sc-cvr__side--product .sc-cvr__side-eb { color: var(--cvr-accent); }
.sc-cvr .sc-cvr__side--product .sc-cvr__side-p { color: var(--sc-gray-600); }

/* B2 bespoke — same shell, blue hairline, free-text heading */
.sc-cvr .sc-cvr__side--bespoke {
  background: #fff;
  border: 1px solid var(--sc-gray-100);
  border-top: 4px solid var(--sc-blue-500);
  box-shadow: var(--sc-shadow-sm);
}
.sc-cvr .sc-cvr__side--bespoke .sc-cvr__side-p { color: var(--sc-gray-600); }

/* B3 image background — auto-darkened for contrast */
.sc-cvr .sc-cvr__side--image {
  overflow: hidden;
  box-shadow: var(--sc-shadow-sm);
  color: #fff;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: var(--sc-blue-900);
  background-image: linear-gradient(180deg, rgba(15,25,61,0) 30%, rgba(15,25,61,.85) 100%), var(--cvr-side-image, var(--cvr-bg-dark));
  background-size: cover;
  background-position: center;
}
.sc-cvr .sc-cvr__side--image .sc-cvr__side-eb { color: var(--cvr-on-dark-accent); margin-bottom: 6px; }
.sc-cvr .sc-cvr__side--image .sc-cvr__side-h { font-weight: 500; font-size: 20px; line-height: 1.2; margin-bottom: 14px; }
.sc-cvr .sc-cvr__side--image .sc-cvr__side-p { color: rgba(255,255,255,.88); }

/* B4 colour flood */
.sc-cvr .sc-cvr__side--flood {
  background: var(--cvr-side-flood, var(--sc-blue-500));
  color: #fff;
  box-shadow: 0 12px 32px rgba(0,75,255,.25);
}
.sc-cvr .sc-cvr__side--flood .sc-cvr__side-eb { color: var(--cvr-on-dark-accent); }
.sc-cvr .sc-cvr__side--flood .sc-cvr__side-h { font-weight: 500; font-size: 20px; line-height: 1.2; }
.sc-cvr .sc-cvr__side--flood .sc-cvr__side-p { color: rgba(255,255,255,.85); }

/* B5 Gracie AI — brand gradient */
.sc-cvr .sc-cvr__side--gracie {
  border-radius: var(--cvr-radius-card);
  padding: 20px;
  color: #fff;
  overflow: hidden;
  background: var(--np-gracie-gradient);
  box-shadow: var(--sc-shadow-md);
}
.sc-cvr .sc-cvr__side--gracie > * { position: relative; }
.sc-cvr .sc-cvr__side-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sc-cvr .sc-cvr__side-brand img { width: 26px; height: 26px; }
.sc-cvr .sc-cvr__side-brandname { font-family: var(--sc-font-display); font-weight: 600; font-size: 15px; letter-spacing: .02em; }
.sc-cvr .sc-cvr__side--gracie .sc-cvr__side-eb { color: rgba(255,255,255,.85); }
.sc-cvr .sc-cvr__side--gracie .sc-cvr__side-h { font-weight: 500; font-size: 21px; line-height: 1.2; margin-bottom: 10px; }
.sc-cvr .sc-cvr__side--gracie .sc-cvr__side-p { color: rgba(255,255,255,.92); }
.sc-cvr .sc-cvr__side-sub {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 11.5px;
  color: rgba(255,255,255,.88);
  text-decoration: none;
}
.sc-cvr .sc-cvr__side-sub:hover { text-decoration: underline; color: #fff; }
.sc-cvr .sc-cvr__side--product .sc-cvr__side-sub,
.sc-cvr .sc-cvr__side--bespoke .sc-cvr__side-sub { color: var(--sc-blue-500); }

/* ---------- CTA background grounds (shared by ④ and ⑤) ----------
   The modifier picks which ground; --cvr-cta-image, set inline from the
   Background image field, overrides it. */
.sc-cvr .sc-cvr__cta--bg-blue { --cvr-cta-ground: var(--cvr-bg-blue); }
.sc-cvr .sc-cvr__cta--bg-dark { --cvr-cta-ground: var(--cvr-bg-dark); }
.sc-cvr .sc-cvr__cta--bg-none { --cvr-cta-ground: none; }

.sc-cvr .sc-cvr__cta--bg-blue,
.sc-cvr .sc-cvr__cta--bg-dark,
.sc-cvr .sc-cvr__cta--bg-none {
  background-color: var(--sc-blue-700);
  background-image: var(--cvr-cta-scrim), var(--cvr-cta-image, var(--cvr-cta-ground, var(--cvr-bg-gradient)));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* ---------- ③ inline CTA, soft ---------- */
.sc-cvr .sc-cvr__soft {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--sc-blue-50);
  border: 1px solid var(--sc-blue-100);
  border-radius: var(--cvr-radius-card);
  box-shadow: var(--sc-shadow-sm);
  padding: 16px 18px;
  margin: 24px 0;
}
.sc-cvr .sc-cvr__soft-ic {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--sc-blue-100);
  flex: none;
  display: flex; align-items: center; justify-content: center;
}
.sc-cvr .sc-cvr__soft-ic img { width: 22px; height: 22px; object-fit: contain; }
.sc-cvr .sc-cvr__soft-bd { flex: 1; min-width: 0; }
.sc-cvr .sc-cvr__soft-bd .sc-cvr__eyebrow { margin-bottom: 2px; }
.sc-cvr .sc-cvr__soft-t { font-weight: 600; font-size: 14px; color: var(--sc-blue-900); }
.sc-cvr .sc-cvr__soft-lk {
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-blue-500);
  text-decoration: none;
  white-space: nowrap;
}
.sc-cvr .sc-cvr__soft-lk::after { content: " \2192"; font-family: var(--sc-font-display); }
.sc-cvr .sc-cvr__soft-lk:hover { color: var(--sc-blue-600); text-decoration: underline; }

/* ---------- ⑧ inline email capture ---------- */
/* The design drew this in mint. Mint is not part of the brand palette the theme
   declares on :root (--sc-blue / --sc-dark-blue / --sc-med-blue / --sc-navy /
   --sc-grey / --sc-red), so it uses --sc-grey #EFF1FF instead, with a
   --sc-med-blue hairline and eyebrow doing the standing-out. The border is what
   separates it from the soft CTA above, which is a flat blue-50 tint. */
.sc-cvr .sc-cvr__emailcap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--cvr-brand-grey);
  border: 1px solid var(--cvr-brand-med);
  border-radius: var(--cvr-radius-card);
  box-shadow: var(--sc-shadow-sm);
  padding: 16px 18px;
  margin: 24px 0;
}
.sc-cvr .sc-cvr__emailcap-bd { flex: 1 1 220px; min-width: 0; }
.sc-cvr .sc-cvr__emailcap-bd .sc-cvr__eyebrow { color: var(--cvr-brand-med); margin-bottom: 3px; }
.sc-cvr .sc-cvr__emailcap-t { font-weight: 600; font-size: 14px; color: var(--sc-blue-900); }
.sc-cvr .sc-cvr__emailcap-form { flex: 0 1 auto; }
/* HubSpot injects its own form CSS after this file, so the single-row layout
   needs both higher specificity and !important to hold. */
.sc-cvr .sc-cvr__emailcap-form { display: flex; align-items: center; }
.sc-cvr .sc-cvr__emailcap-form form.hs-form {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap;
  align-items: center !important;
  margin: 0 !important;
}
/* HubSpot wraps each field in a div with its own margins, which pushed the
   input off the card's centre line. */
.sc-cvr .sc-cvr__emailcap-form .hs-form-field,
.sc-cvr .sc-cvr__emailcap-form .hs_submit,
.sc-cvr .sc-cvr__emailcap-form .actions,
.sc-cvr .sc-cvr__emailcap-form fieldset.form-columns-1 { margin: 0 !important; padding: 0 !important; }
/* HubSpot's fieldsets cap themselves at a fixed max-width. */
.sc-cvr .sc-cvr__emailcap-form fieldset { max-width: none !important; }
.sc-cvr .sc-cvr__emailcap-form .hs-form-field .input { margin: 0 !important; }

/* Consent text.
   HubSpot injects .legal-consent-container BETWEEN the field and the submit
   button, so in a single-row strip it lands awkwardly mid-row, between the
   input and the button. Flex `order` moves it below both, full width, as fine
   print — the visual order changes without touching the DOM order the form
   plugin builds.

   Scoped to .legal-consent-container rather than .hs-richtext: a form's visible
   heading is also a rich-text block, and shrinking that too is a trap we have
   hit before. */
.sc-cvr .sc-cvr__emailcap-form .hs-form-field { order: 1; }
.sc-cvr .sc-cvr__emailcap-form fieldset.form-columns-1 { order: 1; }
.sc-cvr .sc-cvr__emailcap-form .hs_submit { order: 2; }
.sc-cvr .sc-cvr__emailcap-form .legal-consent-container {
  order: 3;
  flex: 0 0 100%;
  margin: 2px 0 0 !important;
}
.sc-cvr .sc-cvr__emailcap-form .legal-consent-container,
.sc-cvr .sc-cvr__emailcap-form .legal-consent-container p,
.sc-cvr .sc-cvr__emailcap-form .legal-consent-container span {
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: var(--sc-gray-500) !important;
  margin: 0 !important;
}
.sc-cvr .sc-cvr__emailcap-form .legal-consent-container a {
  color: var(--sc-blue-500) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sc-cvr .sc-cvr__emailcap-form .hs-form-field > label { display: none !important; }
.sc-cvr .sc-cvr__emailcap-form .hs-input {
  height: 40px !important;
  border: 1px solid var(--sc-gray-200) !important;
  /* Pill, to match the Subscribe button beside it and the sitewide buttons. */
  border-radius: var(--cvr-radius-pill) !important;
  padding: 0 16px !important;
  font: 400 13px var(--sc-font-body) !important;
  color: var(--sc-blue-900) !important;
  background: #fff !important;
  width: 210px !important;
  max-width: 100%;
}
.sc-cvr .sc-cvr__emailcap-form .hs-input:focus { border-color: var(--sc-blue-500) !important; box-shadow: var(--sc-shadow-focus) !important; outline: none !important; }
.sc-cvr .sc-cvr__emailcap-form .hs-button {
  height: 40px !important;
  padding: 0 20px !important;
  border-radius: var(--cvr-radius-pill) !important;
  border: 0 !important;
  background: var(--sc-blue-500) !important;
  color: #fff !important;
  font: 600 13.5px var(--sc-font-body) !important;
  cursor: pointer;
}
.sc-cvr .sc-cvr__emailcap-form .hs-button:hover { background: var(--sc-blue-600) !important; }
.sc-cvr .sc-cvr__emailcap-form .hs-error-msg { font-size: 12px; color: #C22323; }

/* ---------- ④ inline CTA, strong ---------- */
.sc-cvr .BlogPostTCLTCol .InlineCTABlock.sc-cvr__strong {
  position: relative;
  /* Ground comes from the .sc-cvr__cta--bg-* modifier. */
  border-radius: var(--cvr-radius-card);
  padding: 24px 26px;
  margin: 28px 0;
  color: #fff;
  overflow: hidden;
}
.sc-cvr .InlineCTABlock.sc-cvr__strong .cta-section {
  position: relative;
  display: block;
  text-align: left;
  gap: 0;
}
.sc-cvr .sc-cvr__strong-eb { color: var(--cvr-on-dark-accent); margin-bottom: 8px; }
.sc-cvr .BlogPostTCLTCol .InlineCTABlock.sc-cvr__strong .InlineCTABlockHeading {
  font-family: var(--sc-font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 8px;
  max-width: none;
}
.sc-cvr .BlogPostTCLTCol .InlineCTABlock.sc-cvr__strong .InlineCTABlockSubtitle {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
  margin: 0 0 16px;
  max-width: 74%;
}
.sc-cvr .InlineCTABlock.sc-cvr__strong .button a {
  background: #fff;
  color: var(--sc-blue-600);
}

/* ---------- ⑤ end-of-article next-step engine ---------- */
.sc-cvr .sc-cvr__endzone {
  position: relative;
  margin: 8px 0 34px;
  padding-top: 28px;
  border-top: 2px solid var(--sc-gray-100);
}
.sc-cvr .sc-cvr__ez-lead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.sc-cvr .sc-cvr__ez-lead .sc-cvr__eyebrow { font-size: 11px; letter-spacing: .16em; margin-bottom: 0; }

.sc-cvr .sc-cvr__ez-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.sc-cvr .sc-cvr__ez-grid--solo { grid-template-columns: minmax(0, 1fr); }

.sc-cvr .sc-cvr__ez-primary {
  position: relative;
  overflow: hidden;
  /* Ground comes from the .sc-cvr__cta--bg-* modifier. */
  border-radius: var(--cvr-radius-card);
  padding: 26px;
  color: #fff;
}
.sc-cvr .sc-cvr__ez-primary > * { position: relative; }
.sc-cvr .sc-cvr__ez-eb { color: var(--cvr-on-dark-accent); margin-bottom: 10px; }
.sc-cvr .sc-cvr__ez-primary h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: 26px; line-height: 1.2; margin: 0 0 10px; color: #fff; }
.sc-cvr .sc-cvr__ez-primary p { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.85); margin: 0 0 18px; max-width: 82%; }
.sc-cvr .sc-cvr__ez-rating { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.sc-cvr .sc-cvr__ez-stars { color: #FFB400; font-size: 13px; letter-spacing: 1px; }
.sc-cvr .sc-cvr__ez-ratingtx { font-size: 12px; color: rgba(255,255,255,.9); }

.sc-cvr .sc-cvr__ez-secondary {
  background: #fff;
  border: 1px solid var(--sc-gray-100);
  border-radius: var(--cvr-radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.sc-cvr .sc-cvr__ez-eb2 { color: var(--cvr-accent); margin-bottom: 10px; }
.sc-cvr .sc-cvr__ez-doc {
  width: 46px; height: 60px;
  border-radius: 6px;
  background: var(--sc-blue-50);
  border: 1px solid var(--sc-blue-100);
  position: relative;
  margin-bottom: 12px;
  flex: none;
}
.sc-cvr .sc-cvr__ez-doc::before {
  content: "";
  position: absolute;
  inset: 8px 8px auto 8px;
  height: 5px;
  background: var(--cvr-accent);
  border-radius: 2px;
}
.sc-cvr .sc-cvr__ez-secondary h4 { font-family: var(--sc-font-display); font-weight: 500; font-size: 18px; line-height: 1.31; margin: 0 0 6px; }
.sc-cvr .sc-cvr__ez-secondary p { font-size: 12.5px; color: var(--sc-gray-600); line-height: 1.5; margin: 0 0 14px; flex: 1; }
/* The card is a flex column, so a stretched button would run its full width. */
.sc-cvr .sc-cvr__ez-secondary .sc-cvr__btn { align-self: flex-start; }

.sc-cvr .sc-cvr__ez-slot {
  border: 1px dashed var(--sc-blue-200);
  border-radius: var(--cvr-radius-card);
  padding: 16px 18px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--sc-paper);
}
.sc-cvr .sc-cvr__ez-badge {
  font-family: var(--sc-font-body);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sc-blue-500);
  border: 1px solid var(--sc-blue-200);
  border-radius: 6px;
  padding: 3px 7px;
  white-space: nowrap;
}
.sc-cvr .sc-cvr__ez-slotbd { flex: 1 1 220px; min-width: 0; }
.sc-cvr .sc-cvr__ez-slott { font-weight: 600; font-size: 14px; color: var(--sc-blue-900); }
.sc-cvr .sc-cvr__ez-slots { font-size: 12px; color: var(--sc-gray-500); margin-top: 2px; }

.sc-cvr .sc-cvr__ez-related { margin-top: 24px; }

/* "Keep reading" — full-width band at the end of the article, replacing the
   Latest/Related cards that used to overload the sticky rail. Shares the card
   and row styling below. */
.sc-cvr .sc-cvr__keepreading {
  margin: 0 0 34px;
  padding-top: 28px;
  border-top: 2px solid var(--sc-gray-100);
}
.sc-cvr .sc-cvr__keepreading .sc-cvr__ez-rt { margin-bottom: 14px; }
.sc-cvr .sc-cvr__ez-rt { font-family: var(--sc-font-display); font-weight: 600; font-size: 16px; margin: 0 0 12px; }
.sc-cvr .sc-cvr__ez-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sc-cvr .sc-cvr__ez-card {
  border: 1px solid var(--sc-gray-100);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  background: #fff;
  transition: box-shadow .2s cubic-bezier(.65,0,.35,1);
}
.sc-cvr .sc-cvr__ez-card:hover { box-shadow: var(--sc-shadow-md); }
.sc-cvr .sc-cvr__ez-card:hover .sc-cvr__ez-lh { color: var(--sc-blue-500); }
.sc-cvr .sc-cvr__ez-th {
  display: block;
  /* Aspect-ratio rather than a fixed height, so the thumbnail gets real room
     and scales with the column instead of cropping to a 74px strip. */
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 130px;
  background-color: var(--sc-blue-700);
  background-image: linear-gradient(135deg, var(--sc-blue-700), var(--sc-blue-400));
  background-size: cover;
  background-position: center;
}
.sc-cvr .sc-cvr__ez-cb { display: block; padding: 12px; }
.sc-cvr .sc-cvr__ez-lt { display: block; font-weight: 600; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--cvr-accent) 72%, #000); }
@supports not (color: color-mix(in srgb, red 10%, white)) {
  .sc-cvr .sc-cvr__ez-lt { color: var(--sc-blue-700); }
}
.sc-cvr .sc-cvr__ez-lh { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; margin-top: 4px; color: var(--sc-blue-900); }

/* ---------- share ---------- */
.sc-cvr .BlogPostSocialRtCol p { font-weight: 600; font-size: 13.5px; color: var(--sc-blue-900); }
.sc-cvr .BlogPostSocialRtCol ul { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 0; list-style: none; }
.sc-cvr .BlogPostSocialRtCol ul li a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--cvr-brand-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s cubic-bezier(.65,0,.35,1);
}
/* The theme already flips the glyph to white on hover
   (.BlogPostSocialRtCol ul li a:hover svg path { fill:#FFF }). */
.sc-cvr .BlogPostSocialRtCol ul li a:hover { background: var(--cvr-brand-navy); }

/* ===========================================================================
   Responsive.
   The variant's two-class selectors outrank the theme's plain mobile rules,
   so every stacking behaviour overridden above is restated here.
   =========================================================================== */
@media screen and (max-width: 1024px) {
  .sc-cvr .sc-cvr__ez-grid { grid-template-columns: minmax(0, 1fr); }
  .sc-cvr .sc-cvr__ez-primary p { max-width: none; }
  .sc-cvr .sc-cvr__ez-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 991px) {
  /* Rail de-stacks into the flow — sticky is dropped so it cannot trap content.
     Both columns are forced to full width here rather than relying on the
     theme's own mobile rules: the variant's two-class selectors above outrank
     them, so any stacking they used to do has to be restated. */
  .sc-cvr .BlogPostTwoColBox { gap: 24px; flex-wrap: wrap; display: block; }
  .sc-cvr .BlogPostTwoColBox .BlogPostTCLTCol,
  .sc-cvr .BlogPostTwoColBox .BlogPostTCRTCol {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  /* Unpinned and uncapped on mobile; `relative` rather than `static` so the
     slick carousel keeps a positioned ancestor for its absolute track. */
  .sc-cvr .BlogPostTwoColBox .BlogPostTCRTCol {
    position: relative;
    top: auto;
    align-self: auto;
    margin-top: 32px;
  }
  .sc-cvr .sc-cvr__progress { top: var(--header-mob-height, 88px); }
  .sc-cvr .BlogPostBoxFAQBox { scroll-margin-top: calc(var(--header-mob-height, 88px) + 16px); }
  /* A TOC is of little use once the rail is below the article. */
  .sc-cvr .sc-cvr__toc { display: none; }
  .sc-cvr .BlogPostTitle h1 { font-size: 30px; }
  .sc-cvr .BlogPostBoxFAQBoxTitle h2 { font-size: 20px; }
  .sc-cvr .sc-cvr__ez-primary h3 { font-size: 22px; }
}

@media screen and (max-width: 600px) {
  .sc-cvr .BlogPostTitle h1 { font-size: 26px; }
  .sc-cvr .sc-cvr__ez-row { grid-template-columns: minmax(0, 1fr); }
  .sc-cvr .sc-cvr__endzone { margin-bottom: 24px; }
  .sc-cvr .sc-cvr__ez-primary,
  .sc-cvr .BlogPostTCLTCol .InlineCTABlock.sc-cvr__strong { padding: 20px; }
  .sc-cvr .BlogPostTCLTCol .InlineCTABlock.sc-cvr__strong .InlineCTABlockSubtitle { max-width: none; }
  .sc-cvr .sc-cvr__soft { flex-wrap: wrap; }
  .sc-cvr .sc-cvr__soft-lk { width: 100%; }
  .sc-cvr .sc-cvr__emailcap-form,
  .sc-cvr .sc-cvr__emailcap-form .hs-input { width: 100% !important; }
  .sc-cvr .sc-cvr__ez-slot { gap: 12px; }
  .sc-cvr .sc-cvr__btn { width: 100%; }
  .sc-cvr .sc-cvr__soft-lk.sc-cvr__soft-lk { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-cvr .sc-cvr__progress-fill,
  .sc-cvr .sc-cvr__btn,
  .sc-cvr .sc-cvr__ez-card { transition: none; }
}