@layer cis-blog-experience {
  :root {
    --cbe-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --cbe-bg: #f5f5f7;
    --cbe-surface: #ffffff;
    --cbe-surface-soft: #f8f8fa;
    --cbe-text: #1d1d1f;
    --cbe-muted: #555861;
    --cbe-border: #d7d7dc;
    --cbe-accent: #005eb8;
    --cbe-accent-hover: #004987;
    --cbe-focus: #0071e3;
    --cbe-footer: #111827;
    --cbe-footer-text: #f7f8fa;
    --cbe-radius-sm: 10px;
    --cbe-radius: 18px;
    --cbe-shadow: 0 18px 56px rgb(0 0 0 / 8%);
    --cbe-reading: 76ch;
    --cbe-shell: 1200px;
    --cbe-transition: 160ms cubic-bezier(.2, 0, 0, 1);
    color-scheme: light;
  }

  :root[data-cbe-theme="dark"] {
    --cbe-bg: #0d0e11;
    --cbe-surface: #18191d;
    --cbe-surface-soft: #202126;
    --cbe-text: #f5f5f7;
    --cbe-muted: #b8bbc3;
    --cbe-border: #3a3c44;
    --cbe-accent: #6eb6ff;
    --cbe-accent-hover: #9bcdff;
    --cbe-focus: #76baff;
    --cbe-footer: #08090b;
    color-scheme: dark;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-cbe-theme="light"]):not([data-cbe-theme="dark"]),
    :root[data-cbe-theme="system"] {
      --cbe-bg: #0d0e11;
      --cbe-surface: #18191d;
      --cbe-surface-soft: #202126;
      --cbe-text: #f5f5f7;
      --cbe-muted: #b8bbc3;
      --cbe-border: #3a3c44;
      --cbe-accent: #6eb6ff;
      --cbe-accent-hover: #9bcdff;
      --cbe-focus: #76baff;
      --cbe-footer: #08090b;
      color-scheme: dark;
    }
  }

  :root[data-cbe-contrast="true"] {
    --cbe-text: CanvasText;
    --cbe-bg: Canvas;
    --cbe-surface: Canvas;
    --cbe-muted: CanvasText;
    --cbe-border: CanvasText;
    --cbe-accent: LinkText;
    --cbe-accent-hover: LinkText;
  }

  :root[data-cbe-text="true"] { font-size: 112.5%; }

  .cbe-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .cbe-skip-link {
    position: fixed;
    z-index: 10000;
    top: 12px;
    left: 12px;
    transform: translateY(-160%);
    border: 2px solid var(--cbe-focus);
    border-radius: 999px;
    background: var(--cbe-surface);
    color: var(--cbe-text) !important;
    box-shadow: var(--cbe-shadow);
    padding: 10px 16px;
    font: 700 15px/1.3 var(--cbe-font);
    text-decoration: none;
    transition: transform var(--cbe-transition);
  }

  .cbe-skip-link:focus { transform: translateY(0); }

  .cbe-preferences { position: relative; color: var(--cbe-text); font: 400 14px/1.45 var(--cbe-font); }
  .cbe-preferences > summary {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cbe-border);
    border-radius: 999px;
    background: var(--cbe-surface);
    color: var(--cbe-text);
    padding: 8px 13px;
    gap: 7px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
    transition: background var(--cbe-transition), transform var(--cbe-transition);
  }
  .cbe-preferences > summary::-webkit-details-marker { display: none; }
  .cbe-preferences > summary:hover { background: var(--cbe-surface-soft); }
  .cbe-preferences > summary:active { transform: scale(.98); }
  .cbe-preferences__panel {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    width: min(330px, calc(100vw - 24px));
    border: 1px solid var(--cbe-border);
    border-radius: var(--cbe-radius);
    background: var(--cbe-surface);
    color: var(--cbe-text);
    box-shadow: var(--cbe-shadow);
    padding: 20px;
    gap: 13px;
  }
  .cbe-preferences__heading { font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
  .cbe-preferences__intro { margin: -8px 0 2px; color: var(--cbe-muted); font-size: 13px; }
  .cbe-preferences__field { display: grid; gap: 6px; font-weight: 650; }
  .cbe-preferences__field select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--cbe-border);
    border-radius: var(--cbe-radius-sm);
    background: var(--cbe-surface);
    color: var(--cbe-text);
    padding: 8px 10px;
    font: inherit;
  }
  .cbe-preferences__check { display: flex; min-height: 34px; align-items: center; gap: 10px; font-weight: 600; }
  .cbe-preferences__check input { width: 20px; height: 20px; accent-color: var(--cbe-accent); }
  .cbe-preferences__reset {
    min-height: 42px;
    border: 1px solid var(--cbe-border);
    border-radius: 999px;
    background: var(--cbe-surface-soft);
    color: var(--cbe-text);
    padding: 8px 12px;
    font: 700 13px/1.2 var(--cbe-font);
    cursor: pointer;
  }

  [data-blog-experience] *, [data-blog-experience] *::before, [data-blog-experience] *::after { box-sizing: border-box; }
  [data-blog-experience] { min-width: 320px; background: var(--cbe-bg); scroll-padding-top: 88px; }
  [data-blog-experience] body {
    min-height: 100vh;
    margin: 0;
    padding-top: 0 !important;
    background: var(--cbe-bg) !important;
    color: var(--cbe-text) !important;
    font-family: var(--cbe-font) !important;
    font-size: 16px;
    line-height: 1.65 !important;
    letter-spacing: normal !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  [data-blog-experience] :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cbe-focus) 72%, transparent);
    outline-offset: 3px;
  }
  [data-blog-experience] a { color: var(--cbe-accent); text-underline-offset: .18em; }
  [data-blog-experience] a:hover { color: var(--cbe-accent-hover); }
  :root[data-cbe-links="true"] [data-blog-experience] a:not([class*="button"]):not([class*="btn"]) { text-decoration: underline !important; }
  [data-blog-experience] img { max-width: 100%; height: auto; }
  [data-blog-experience] .container { width: min(var(--cbe-shell), calc(100% - 32px)) !important; max-width: none !important; margin-inline: auto !important; }

  [data-blog-experience] .cbe-site-header.cBlg-header {
    position: sticky !important;
    z-index: 100;
    top: 0;
    right: auto;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 68px;
    margin: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--cbe-border) 70%, transparent);
    background: color-mix(in srgb, var(--cbe-surface) 88%, transparent) !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
  }
  [data-blog-experience] .cbe-header-inner {
    display: flex;
    width: min(var(--cbe-shell), calc(100% - 32px));
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    gap: 18px;
  }
  [data-blog-experience] .cbe-header-logo { display: inline-flex; min-width: 118px; min-height: 44px; align-items: center; }
  [data-blog-experience] .cbe-header-actions { display: flex; align-items: center; gap: 10px; }
  [data-blog-experience] .cbe-header-actions .request-btn,
  [data-blog-experience] .cbe-header-actions .header-nav-link,
  [data-blog-experience] .cbe-header-actions .menu-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 9px 15px;
    font: 700 14px/1.2 var(--cbe-font);
    text-decoration: none;
  }
  [data-blog-experience] .cbe-header-actions .header-nav-link,
  [data-blog-experience] .cbe-header-actions .menu-button { border: 1px solid var(--cbe-border); background: var(--cbe-surface); color: var(--cbe-text); }

  /* The all-guides page is a dense index. Keep the controls attached to the
     header and leave the reading surface clear rather than covering it. */
  [data-blog-experience] .cbe-page--index .cBlg-ctntBlock { max-width: min(1180px, calc(100% - 32px)) !important; }
  [data-blog-experience] .cbe-page--index .cbe-preferences__panel { right: 0; left: auto; width: min(296px, calc(100vw - 32px)); }

  [data-blog-experience] main { display: block; }
  [data-blog-experience] .cBlg-wrapper { background: transparent !important; }
  [data-blog-experience] .cBlg-ctntBlock { margin-top: 32px !important; }
  [data-blog-experience] .cbe-page--article .cBlg-ctntBlock { width: min(980px, calc(100% - 32px)) !important; }
  [data-blog-experience] .cbe-page--article #eb { width: 100% !important; padding: 0 !important; }
  [data-blog-experience] .cBlg-blgBx,
  [data-blog-experience] .eb-entry-brief,
  [data-blog-experience] .eb-entry-recommendation,
  [data-blog-experience] .eb-entry-review,
  [data-blog-experience] .eb-growth-related {
    border-color: var(--cbe-border) !important;
    background: var(--cbe-surface) !important;
    color: var(--cbe-text) !important;
  }
  [data-blog-experience] #eb .cBlg-blgBx.cBlg-fullW { padding: clamp(22px, 5vw, 56px) !important; border-radius: var(--cbe-radius); }
  [data-blog-experience] .cBlg-heading2 { background: transparent !important; }
  [data-blog-experience] #eb h1.eb-entry-title {
    max-width: 22ch;
    margin: 0 auto clamp(20px, 4vw, 36px) !important;
    color: var(--cbe-text) !important;
    font-size: clamp(2rem, 6vw, 4rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    text-align: center;
    text-wrap: balance;
  }
  [data-blog-experience] .eb-entry-article { max-width: var(--cbe-reading); margin-inline: auto; color: var(--cbe-text); }
  [data-blog-experience] .eb-entry-article :where(p, li) { color: var(--cbe-text) !important; font-size: clamp(1rem, 1.5vw, 1.125rem) !important; line-height: 1.75 !important; }
  [data-blog-experience] .eb-entry-article :where(h2, h3, h4) { color: var(--cbe-text) !important; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
  [data-blog-experience] .eb-entry-article h2 { margin-top: 2.1em; font-size: clamp(1.55rem, 3vw, 2.15rem); }
  [data-blog-experience] .eb-entry-article h3 { margin-top: 1.8em; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
  [data-blog-experience] .eb-entry-article :where(pre, table) { max-width: 100%; overflow-x: auto; }
  [data-blog-experience] .eb-entry-article table { display: block; -webkit-overflow-scrolling: touch; }
  [data-blog-experience] .eb-entry-article blockquote { border-left: 4px solid var(--cbe-accent); background: var(--cbe-surface-soft); color: var(--cbe-text); }
  [data-blog-experience] .hero-image-figure { max-width: var(--cbe-reading); margin: clamp(24px, 5vw, 48px) auto; }
  [data-blog-experience] .hero-image-figure img { display: block !important; width: 100% !important; aspect-ratio: 3 / 2; border-radius: var(--cbe-radius); object-fit: cover; }
  [data-blog-experience] .hero-image-figure figcaption { color: var(--cbe-muted); font-size: 13px; }
  [data-blog-experience] .table-of-contents { border-color: var(--cbe-border); border-radius: var(--cbe-radius-sm); background: var(--cbe-surface-soft); }
  [data-blog-experience] .toc-toggle { min-height: 48px; color: var(--cbe-text); }

  [data-blog-experience] .cbe-page--home .cBlg-bnr { margin-top: 28px !important; border-radius: var(--cbe-radius); background: var(--cbe-surface) !important; color: var(--cbe-text); }
  [data-blog-experience] .cbe-page--home .cBlg-bnrTxtHD,
  [data-blog-experience] .cbe-page--home .esignly-latest-head h2 { color: var(--cbe-text) !important; text-wrap: balance; }
  [data-blog-experience] .cbe-page--home .esignly-blog-hero p,
  [data-blog-experience] .cbe-page--home .esignly-blog-hero li,
  [data-blog-experience] .cbe-page--home .esignly-latest-head p { color: var(--cbe-muted) !important; }
  [data-blog-experience] .esignly-blog-grid { gap: 20px; }
  [data-blog-experience] .esignly-blog-card { overflow: hidden; border-radius: var(--cbe-radius) !important; box-shadow: 0 1px 2px rgb(0 0 0 / 3%); }
  [data-blog-experience] .esignly-blog-card__media img { display: block !important; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  [data-blog-experience] .esignly-blog-card :where(p, a) { color: var(--cbe-text); }
  [data-blog-experience] .esignly-blog-card__meta { color: var(--cbe-muted) !important; }

  [data-blog-experience] .cbe-site-footer.cBlg-footer {
    width: 100% !important;
    max-width: none !important;
    margin: 64px 0 0 !important;
    border: 0;
    background: var(--cbe-footer) !important;
    color: var(--cbe-footer-text) !important;
    padding: 48px max(16px, calc((100vw - var(--cbe-shell)) / 2)) !important;
    text-transform: none !important;
  }
  [data-blog-experience] .cbe-site-footer a { color: var(--cbe-footer-text) !important; }
  [data-blog-experience] .cbe-site-footer::after { content: "Made with ♥ by CIS Growth Team — Friday, July 17, 2026, 10:49:06 PM"; display: block; margin-top: 24px; text-align: center; font-size: 0.875rem; opacity: 0.9; text-transform: none; }
  [data-blog-experience] .cbe-site-footer .footer_menus { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; text-align: left; }
  [data-blog-experience] .cbe-site-footer .footer_menus nav { width: auto !important; }
  [data-blog-experience] .cbe-site-footer .cBlg-footer-links { text-align: left; }
  [data-blog-experience] .cbe-site-footer .cBlg-footer-links li { display: block; padding: 3px 0; }
  [data-blog-experience] .cbe-site-footer .cBlg-footer-links li::after { display: none; }

  :root[data-cbe-theme="dark"] [data-blog-experience] :where(.cBlg-heading2, .cBlg-blgBxTextSecIn, .eb-post-body),
  :root[data-cbe-theme="dark"] [data-blog-experience] .esignly-blog-card,
  :root[data-cbe-theme="dark"] [data-blog-experience] #eb .cBlg-blgBx { background: var(--cbe-surface) !important; color: var(--cbe-text) !important; }

  :root[data-cbe-contrast="true"] [data-blog-experience] :where(.cBlg-blgBx, .cBlg-bnr, .table-of-contents, .cbe-preferences__panel) { border: 2px solid CanvasText !important; box-shadow: none !important; }

  @media (max-width: 900px) {
    [data-blog-experience] .cbe-preferences__label { display: none; }
    [data-blog-experience] .cbe-site-footer .footer_menus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 640px) {
    [data-blog-experience] .cbe-header-inner { width: calc(100% - 24px); min-height: 60px; }
    [data-blog-experience] .cbe-header-actions { gap: 6px; }
    [data-blog-experience] .cbe-header-actions .request-btn { display: none; }
    [data-blog-experience] .cbe-preferences__panel { position: fixed; top: 72px; right: 12px; }
    [data-blog-experience] .container,
    [data-blog-experience] .cbe-page--article .cBlg-ctntBlock { width: calc(100% - 24px) !important; }
    [data-blog-experience] #eb .cBlg-blgBx.cBlg-fullW { padding: 22px 18px !important; }
    [data-blog-experience] .eb-entry-article img { display: block !important; }
    [data-blog-experience] .cbe-site-footer { margin-top: 40px !important; padding-block: 36px !important; }
    [data-blog-experience] .cbe-site-footer .footer_menus { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cbe-motion="false"]) *, :root:not([data-cbe-motion="false"]) *::before, :root:not([data-cbe-motion="false"]) *::after {
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
  :root[data-cbe-motion="true"] *, :root[data-cbe-motion="true"] *::before, :root[data-cbe-motion="true"] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  @media (forced-colors: active) {
    .cbe-preferences > summary, .cbe-preferences__panel, [data-blog-experience] .cBlg-blgBx { border: 1px solid CanvasText !important; }
    [data-blog-experience] :where(a, button, summary):focus-visible { outline: 3px solid Highlight !important; }
  }
}
