.elementor-2013 .elementor-element.elementor-element-cbcafdb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:56px;--padding-bottom:88px;--padding-left:0px;--padding-right:0px;}.elementor-2013 .elementor-element.elementor-element-2a415b0d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-2013 .elementor-element.elementor-element-918a92a{font-family:"Geist", Sans-serif;font-size:26px;font-weight:500;line-height:1.2em;letter-spacing:-0.02em;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}}@media(max-width:767px){.elementor-2013 .elementor-element.elementor-element-cbcafdb{--padding-top:56px;--padding-bottom:88px;--padding-left:16px;--padding-right:16px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}}@media(min-width:768px){.elementor-2013 .elementor-element.elementor-element-2a415b0d{--content-width:900px;}}/* Start custom CSS *//* ========================================================
   AI Overviews / local "best" drop — post stylesheet
   ========================================================
   WHERE THIS GOES
   Edit post with Elementor > hamburger > Page Settings >
   Advanced > Custom CSS.

   PAIRS WITH
   aimkc-blog-aio-local-drop-v1.json

   This replaces the Gutenberg version of the post. The old
   editor content should be removed once the template is
   inserted, or the article will render twice.

   Uses the site's CURRENT tokens (--color-accent,
   --color-accent-hover, --font-body, --color-ink,
   --color-ink-soft, --radius-*). Avoids --color-stone and
   --color-stone-soft, which inverted in the token rename.

   Chart colours are baked into the SVG markup in the JSON,
   not overridden here — so what you read in the template is
   what renders.

   File: aimkc-post-aio-local-v2.css
   ======================================================== */

.aimkc-fg,
.aimkc-aio {
  --pb-panel: #FFFFFF;
  --pb-wash:  #F6F5F2;
  --pb-rule:  rgba(14, 16, 16, 0.12);
  --pb-hair:  rgba(14, 16, 16, 0.07);
  --pb-dim:   rgba(14, 14, 16, 0.48);
  --pb-mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  margin: 36px 0;
}

.aimkc-fg *, .aimkc-fg *::before, .aimkc-fg *::after,
.aimkc-aio *, .aimkc-aio *::before, .aimkc-aio *::after { box-sizing: border-box; }


/* ========================================================
   1. HEADINGS — specificity fix
   ========================================================
   Elementor's kit rule .elementor-widget-heading
   .elementor-heading-title ties at (0,2,0) and loads later.
   Chaining the widget class takes these to (0,3,0).
   ======================================================== */

.elementor-widget-heading.aimkc-post__h2 { margin: 8px 0 18px; }

.elementor-widget-heading.aimkc-post__h2 .elementor-heading-title {
  font-family: var(--font-body);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--color-ink);
  max-width: 26ch;
}

.aimkc-post__h2 .elementor-heading-title em {
  font-style: italic;
  color: var(--color-accent);
}


/* ========================================================
   2. ANCHORS
   ========================================================
   Invisible scroll targets. scroll-margin clears the sticky
   header so a jump link doesn't park the heading underneath it.
   ======================================================== */

.aimkc-post__anchor { margin: 72px 0 0; }
.aimkc-post__anchor:first-child { margin-top: 0; }

.aio-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 90px;
}


/* ========================================================
   3. PROSE
   ======================================================== */

.elementor-widget-text-editor.aimkc-post__prose p {
  font-size: 18px;
  line-height: 1.72;
  color: var(--color-ink-soft);
  margin: 0 0 22px;
  max-width: 68ch;
}

.elementor-widget-text-editor.aimkc-post__prose p:last-child { margin-bottom: 0; }

.aimkc-post__prose strong { color: var(--color-ink); font-weight: 700; }
.aimkc-post__prose em { font-style: italic; }

.aimkc-post__prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.aimkc-post__prose a:hover { color: var(--color-accent-hover); }

.aimkc-post__prose ul {
  margin: 0 0 22px;
  padding-left: 0;
  list-style: none;
  max-width: 68ch;
}

.aimkc-post__prose ul li {
  position: relative;
  padding-left: 26px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-ink-soft);
  margin-bottom: 14px;
}

.aimkc-post__prose ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

.aimkc-post__kicker .cga-eyebrow-line {
  font-family: var(--pb-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}

.aimkc-post__prose .cga-dek {
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.45;
  color: rgba(14, 14, 16, 0.62);
  max-width: 52ch;
}

/* Methodology runs smaller and quieter than body copy */
.elementor-widget-text-editor.aimkc-post__prose p.aio-method {
  font-size: 15px;
  line-height: 1.65;
  font-style: italic;
  color: rgba(14, 14, 16, 0.55);
  max-width: 76ch;
}


/* ========================================================
   4. TL;DR PANEL
   ======================================================== */

.fg-tldr {
  background: var(--pb-panel);
  border: 1px solid var(--pb-rule);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 28px 32px;
}

.fg-tldr__lab {
  display: block;
  font-family: var(--pb-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.fg-tldr__list { list-style: none; padding: 0; margin: 0; }

.fg-tldr__list li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin-bottom: 12px;
}

.fg-tldr__list li:last-child { margin-bottom: 0; }

.fg-tldr__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
}

.fg-tldr__list strong { color: var(--color-ink); font-weight: 700; }


/* ========================================================
   5. JUMP BAR
   ======================================================== */

.fg-jump {
  border-top: 1px solid var(--pb-rule);
  border-bottom: 1px solid var(--pb-rule);
  padding: 18px 0;
}

.fg-jump__lab {
  display: block;
  font-family: var(--pb-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pb-dim);
  margin-bottom: 12px;
}

.fg-jump ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: fgjump;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.fg-jump li { counter-increment: fgjump; }

.fg-jump a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}

.fg-jump a::before {
  content: counter(fgjump, decimal-leading-zero);
  font-family: var(--pb-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
}

.fg-jump a:hover { color: var(--color-accent); }


/* ========================================================
   6. CHART FIGURES
   ======================================================== */

.aio-fig {
  margin: 0;
  border: 1px solid var(--pb-rule);
  border-radius: var(--radius-md);
  background: var(--pb-panel);
  padding: 20px 20px 14px;
}

.aio-fig svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-body);
}

.aio-cap {
  font-size: 13px;
  line-height: 1.6;
  color: var(--pb-dim);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--pb-hair);
  text-align: left;
}


/* ========================================================
   7. "VIEW DATA AS TABLE"
   ======================================================== */

.aio-data {
  margin-top: 14px;
  border-top: 1px solid var(--pb-hair);
  padding-top: 12px;
}

.aio-data summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 6px 40px 6px 0;
  font-family: var(--pb-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pb-dim);
  transition: color 200ms ease;
}

.aio-data summary::-webkit-details-marker { display: none; }
.aio-data summary:hover { color: var(--color-accent); }

.aio-data summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 8px 1.5px, 1.5px 8px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 250ms ease;
}

.aio-data[open] summary { color: var(--color-accent); }

.aio-data[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  background-size: 8px 1.5px, 0 0;
}

.aio-scroll {
  max-height: 420px;
  overflow: auto;
  margin-top: 12px;
  border: 1px solid var(--pb-rule);
  border-radius: var(--radius-sm);
}


/* ========================================================
   8. DATA TABLES
   ========================================================
   Hello Elementor's reset.css zebra-stripes tables at (0,1,4)
   with  table tbody > tr:nth-child(2n+1) > td
   Leading with .aimkc-aio takes these to (0,2,3)+ and wins on
   class count, which is also what keeps the sticky header
   opaque instead of letting rows read through it.
   ======================================================== */

.aimkc-aio table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--pb-mono);
  font-size: 12.5px;
  margin: 0;
}

.aimkc-aio table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--pb-panel);
  text-align: right;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pb-dim);
  padding: 11px 14px;
  border-bottom: 1px solid var(--pb-rule);
  white-space: nowrap;
}

.aimkc-aio table thead th:first-child { text-align: left; }

.aimkc-aio table tbody > tr > td {
  background: var(--pb-panel);
  padding: 7px 14px;
  border-bottom: 1px solid var(--pb-hair);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  text-align: right;
  white-space: nowrap;
}

.aimkc-aio table tbody > tr > td:first-child {
  text-align: left;
  color: var(--pb-dim);
}

.aimkc-aio table tbody > tr:last-child > td { border-bottom: 0; }


/* ========================================================
   9. PULL QUOTE
   ======================================================== */

.aimkc-post__quote { margin: 44px 0; }

.post-quote {
  margin: 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--color-accent);
}

.post-quote p {
  margin: 0;
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: var(--color-ink);
}


/* ========================================================
   10. CTA
   ========================================================
   Full state coverage + !important because Hello Elementor's
   reset.css sets button:hover/:focus background to #c36.
   ======================================================== */

.aimkc-post__cta { margin: 56px 0; }

.post-cta {
  background: var(--color-ink);
  border-radius: var(--radius-xl);
  padding: 44px 44px 40px;
}

.post-cta__eyebrow {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  margin: 0 0 14px;
}

.post-cta__head {
  font-family: var(--font-body);
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 0 14px;
}

.post-cta__body {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 26px;
}

.post-cta__btn,
.post-cta__btn:link,
.post-cta__btn:visited,
.post-cta__btn:hover,
.post-cta__btn:focus,
.post-cta__btn:active,
.post-cta__btn:focus-visible {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 30px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  border-radius: 6px !important;
  border: 2px solid var(--color-accent) !important;
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  cursor: pointer !important;
  outline: none;
  transition: background 200ms ease, border-color 200ms ease, transform 120ms ease;
}

.post-cta__btn:hover,
.post-cta__btn:focus-visible {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  transform: translateY(-1px);
}

.post-cta__note {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.50);
  margin: 18px 0 0;
}

/* Elementor suppresses clicks on HTML widgets without this */
.aimkc-post__cta,
.aimkc-post__cta * { pointer-events: all; }


/* ========================================================
   11. RESPONSIVE
   ======================================================== */

@media (max-width: 767px) {
  .elementor-widget-heading.aimkc-post__h2 .elementor-heading-title { font-size: 26px; }
  .aimkc-post__anchor { margin-top: 52px; }

  .elementor-widget-text-editor.aimkc-post__prose p,
  .aimkc-post__prose ul li { font-size: 17px; }

  .fg-tldr { padding: 22px 20px; }
  .fg-jump ol { flex-direction: column; gap: 10px; }

  .aio-fig { padding: 12px 12px 10px; }
  .aio-scroll { max-height: 340px; }
  .aimkc-aio table { font-size: 11.5px; }
  .aimkc-aio table thead th,
  .aimkc-aio table tbody > tr > td { padding: 6px 10px; }

  .post-cta { padding: 32px 24px 28px; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Geist';
	font-display: auto;
	src: url('https://aimarketingkc.com/wp-content/uploads/2026/05/Geist-VariableFont_wght.ttf') format('truetype');
}
/* End Custom Fonts CSS */