/* ==========================================================================
   CF26 data viz skin (charts, tables, infographics) - site wide
   Same dark navy + teal glow treatment as the audit cards (.cf26-sidecta).
   Loaded on every page via Elementor snippet 1351 and on specialty pages
   via footer pattern 1396.
   ========================================================================== */
:root {
  --vz-bg: radial-gradient(520px 300px at 100% 0%, rgba(13, 179, 178, .40), rgba(13, 179, 178, 0) 70%), linear-gradient(155deg, #1d3649, #182738 58%, #131f2c);
  --vz-bg-soft: radial-gradient(420px 260px at 0% 100%, rgba(13, 179, 178, .22), rgba(13, 179, 178, 0) 70%), radial-gradient(520px 300px at 100% 0%, rgba(13, 179, 178, .36), rgba(13, 179, 178, 0) 70%), linear-gradient(155deg, #1d3649, #182738 58%, #131f2c);
  --vz-glass: rgba(255, 255, 255, .055);
  --vz-line: rgba(255, 255, 255, .09);
  --vz-k: #7ff0ee;
  --vz-text: #c5d0db;
  --vz-muted: #a9b6c4;
  --vz-shadow: 0 34px 70px -44px rgba(19, 31, 44, .75);
}

/* ---------- "On this page" (specialty guides) ---------- */
.cf26-lx-toc {
  top: 104px; padding: 22px 18px 18px; border-radius: 22px; border: 0;
  background: var(--vz-bg); color: #fff; box-shadow: var(--vz-shadow);
  max-height: calc(100vh - 128px); overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.cf26-lx-toc > p { margin: 0 4px; font-size: 12.5px; letter-spacing: 2.6px; color: var(--vz-k); }
.cf26-lx-toc__bar { display: block; height: 3px; margin: 14px 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.cf26-lx-toc__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #0db3b2, #7ff0ee); transition: width .2s linear; }
.cf26-lx-toc ol { margin-top: 8px; gap: 2px; }
.cf26-lx-toc a {
  grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px;
  font-size: 14px; line-height: 1.35; color: var(--vz-text); position: relative;
}
.cf26-lx-toc a::before {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; padding: 0;
  background: var(--vz-glass); border: 1px solid var(--vz-line); color: var(--vz-k); font-size: 11px; letter-spacing: .3px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cf26-lx-toc a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.cf26-lx-toc a.is-active { background: linear-gradient(90deg, rgba(13, 179, 178, .24), rgba(13, 179, 178, .04)); color: #fff; font-weight: 500; }
.cf26-lx-toc a.is-active::before { background: #0db3b2; border-color: #0db3b2; color: #fff; }
.cf26-lx-toc__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 4px 2px; padding: 11px 16px; border-radius: 999px;
  background: #0db3b2; color: #fff; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 15px; text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.cf26-lx-toc a.cf26-lx-toc__cta { display: flex; grid-template-columns: none; color: #fff; font-weight: 500; }
.cf26-lx-toc a.cf26-lx-toc__cta::before { content: none; display: none; }
.cf26-lx-toc__cta:hover { background: #0a8f8e; color: #fff; transform: translateY(-1px); }
@media (max-width: 1024px) {
  .cf26-lx-toc { max-height: none; overflow: visible; }
  .cf26-lx-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
  .cf26-lx-toc__bar { display: none; }
}
@media (max-width: 600px) { .cf26-lx-toc ol { grid-template-columns: minmax(0, 1fr); } }

/* ---------- key takeaways ---------- */
.cf26-lx-keys { background: var(--vz-bg); box-shadow: var(--vz-shadow); border-radius: 22px; }

/* ---------- shared dark panel for every infographic ---------- */
.cf26-lx-stats, .cf26-lx-flow, .cf26-lx-road, .cf26-lx-layers, .cf26-lx-bars, .cf26-lx-tablewrap {
  background: var(--vz-bg-soft); border: 0; border-radius: 22px; box-shadow: var(--vz-shadow); color: #fff;
}
.cf26-lx-stats, .cf26-lx-flow, .cf26-lx-road, .cf26-lx-layers, .cf26-lx-bars { padding: clamp(16px, 2.2vw, 26px); }
.cf26-lx-fig figcaption { margin-top: 12px; }

/* stats */
.cf26-lx-stats div, .cf26-lx-stats div:first-child { background: var(--vz-glass); border: 1px solid var(--vz-line); box-shadow: none; }
.cf26-lx-stats div:first-child { background: linear-gradient(150deg, rgba(13, 179, 178, .30), rgba(13, 179, 178, .08)); border-color: rgba(127, 240, 238, .25); }
.cf26-lx-stats b, .cf26-lx-stats div:first-child b { color: var(--vz-k); }
.cf26-lx-stats div:first-child b { color: #fff; }
.cf26-lx-stats span, .cf26-lx-stats div:first-child span { color: var(--vz-muted); }

/* flow */
.cf26-lx-flow div { background: var(--vz-glass); border: 1px solid var(--vz-line); }
.cf26-lx-flow div:not(:last-child)::after { border-color: var(--vz-k); }
.cf26-lx-flow i { background: rgba(127, 240, 238, .12); color: var(--vz-k); }
.cf26-lx-flow b { color: #fff; }
.cf26-lx-flow span { color: var(--vz-muted); }
.cf26-lx-flow div:last-child { background: linear-gradient(150deg, #0db3b2, #0a8f8e); border-color: transparent; }
.cf26-lx-flow div:last-child i { background: #fff; color: #0a8f8e; }
.cf26-lx-flow div:last-child span { color: rgba(255, 255, 255, .86); }

/* tables */
.cf26-lx-tablewrap { padding: 6px; }
.cf26-lx-table { color: var(--vz-text); }
.cf26-lx-table th { background: transparent; color: var(--vz-k); font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; padding: 16px 16px 12px; border-bottom: 1px solid rgba(127, 240, 238, .22); }
.cf26-lx-table td { color: var(--vz-text); border-top: 1px solid var(--vz-line); }
.cf26-lx-table tr:first-child td { border-top: 0; }
.cf26-lx-table tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }
.cf26-lx-table td:first-child { color: #fff; }
.cf26-lx-table a { color: var(--vz-k); }

/* roadmap */
.cf26-lx-road small { color: var(--vz-k); }
.cf26-lx-road span { background: linear-gradient(90deg, #0a8f8e, #0db3b2); box-shadow: 0 10px 24px -16px rgba(13, 179, 178, .8); }
.cf26-lx-road div:nth-child(even) span { background: var(--vz-glass); border: 1px solid var(--vz-line); box-shadow: none; color: #fff; }

/* layers / pyramid */
.cf26-lx-layers div { background: var(--vz-glass); border: 1px solid var(--vz-line); }
.cf26-lx-layers b { color: #fff; }
.cf26-lx-layers span { color: var(--vz-muted); }
.cf26-lx-layers div:first-child { background: linear-gradient(150deg, #0db3b2, #0a8f8e); border-color: transparent; }
.cf26-lx-layers div:first-child b { color: #fff; }
.cf26-lx-layers div:first-child span { color: rgba(255, 255, 255, .86); }

/* bars */
.cf26-lx-bars small { color: #fff; }
.cf26-lx-bars small em { color: var(--vz-k); }
.cf26-lx-bars i { background: rgba(255, 255, 255, .1); }
.cf26-lx-bars div:nth-child(even) i::before { background: linear-gradient(90deg, #4f7392, #a9b6c4); }

/* checklists: light tint so they read as part of the same family */
.cf26-lx-check li { background: linear-gradient(150deg, #eef9f9, #f7fafb); border: 1px solid rgba(13, 179, 178, .16); }

/* ---------- blog post tables (single post template 1331) ---------- */
.cf26-pst .cf26-pst-content .wp-block-table { overflow-x: auto; padding-bottom: 28px; margin-bottom: -2px; }
.cf26-pst .cf26-pst-content .wp-block-table table,
.cf26-pst .cf26-pst-content table {
  border: 0; border-radius: 18px; background: var(--vz-bg-soft); color: var(--vz-text); min-width: 520px; box-shadow: var(--vz-shadow);
}
.cf26-pst .cf26-pst-content .wp-block-table table { margin: 0; }
.cf26-pst .cf26-pst-content th {
  background: transparent; color: var(--vz-k); font-family: 'Jost', sans-serif; font-weight: 500; font-size: 12.5px;
  letter-spacing: 1.6px; text-transform: uppercase; border-bottom: 1px solid rgba(127, 240, 238, .22);
}
.cf26-pst .cf26-pst-content td { color: var(--vz-text); border-bottom: 1px solid var(--vz-line); }
.cf26-pst .cf26-pst-content tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }
.cf26-pst .cf26-pst-content td:first-child { color: #fff; font-weight: 600; }
.cf26-pst .cf26-pst-content td a { color: var(--vz-k); }
.cf26-pst .cf26-pst-content .wp-block-table figcaption { padding: 10px 4px 0; font-size: 13px; color: var(--text-muted, #5b6776); }
.cf26-pst .cf26-pst-content .wp-block-table thead, .cf26-pst .cf26-pst-content .wp-block-table tfoot { border: 0; }
.cf26-pst .cf26-pst-content .wp-block-table th, .cf26-pst .cf26-pst-content .wp-block-table td { border: 0; border-bottom: 1px solid var(--vz-line); }
.cf26-pst .cf26-pst-content .wp-block-table th { border-bottom-color: rgba(127, 240, 238, .22); }
.cf26-pst .cf26-pst-content .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.cf26-pst .cf26-pst-content .wp-block-table { padding-inline: 2px; }
.cf26-pst .cf26-pst-content .wp-block-table table, .cf26-pst .cf26-pst-content table { box-shadow: 0 16px 30px -22px rgba(19, 31, 44, .6); }
.cf26-pst .cf26-pst-content .wp-block-table { padding-bottom: 30px; margin-bottom: 0; }

/* ---------- v4: rounded rows inside tables, no clipped square shadow ---------- */
.cf26-lx-tablewrap { padding: 10px 12px 12px; overflow-x: auto; }
.cf26-lx-table, .cf26-pst .cf26-pst-content table, .cf26-pst .cf26-pst-content .wp-block-table table { border-collapse: separate; border-spacing: 0 6px; }
.cf26-lx-table th, .cf26-lx-table td,
.cf26-pst .cf26-pst-content .wp-block-table th, .cf26-pst .cf26-pst-content .wp-block-table td,
.cf26-pst .cf26-pst-content th, .cf26-pst .cf26-pst-content td { border: 0; }
.cf26-lx-table th, .cf26-pst .cf26-pst-content th { padding: 12px 16px 6px; background: transparent; }
.cf26-lx-table td, .cf26-pst .cf26-pst-content td { background: rgba(255, 255, 255, .045); padding: 14px 16px; }
.cf26-lx-table tr:nth-child(even) td, .cf26-pst .cf26-pst-content tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .075); }
.cf26-lx-table td:first-child, .cf26-pst .cf26-pst-content td:first-child { border-radius: 14px 0 0 14px; }
.cf26-lx-table td:last-child, .cf26-pst .cf26-pst-content td:last-child { border-radius: 0 14px 14px 0; }
.cf26-lx-table td:only-child, .cf26-pst .cf26-pst-content td:only-child { border-radius: 14px; }
.cf26-lx-table tbody tr:hover td, .cf26-pst .cf26-pst-content tbody tr:hover td { background: rgba(13, 179, 178, .14); }
/* blog: shadow and rounding live on the scroll box itself so nothing gets clipped into a square */
.cf26-pst .cf26-pst-content .wp-block-table { overflow-x: auto; padding: 8px 12px 10px; margin-bottom: 1.3em; border-radius: 20px; background: var(--vz-bg-soft); box-shadow: var(--vz-shadow); }
.cf26-pst .cf26-pst-content .wp-block-table table { background: transparent; box-shadow: none; border-radius: 0; }
.cf26-pst .cf26-pst-content .wp-block-table figcaption { color: var(--vz-muted); padding: 4px 4px 2px; }