.elementor-kit-16{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595FED;--e-global-color-text:#7A7A7A54;--e-global-color-accent:#61CE70;--e-global-color-255aa65e:#000;--e-global-color-7ffedcb1:#FFF;--e-global-color-1bc128a2:#2F2F2F;--e-global-color-5831439:#028065;--e-global-color-45e4a416:#F6B640;--e-global-color-6b60d86:#F9F9F9;--e-global-color-ac8e61d:#024637;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-size:46px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-letter-spacing:0px;--e-global-typography-secondary-font-family:"Roboto";--e-global-typography-secondary-font-size:36px;--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-size:23px;--e-global-typography-text-font-weight:500;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:400;--e-global-typography-86399af-font-family:"Roboto";--e-global-typography-86399af-font-size:32px;--e-global-typography-86399af-font-weight:700;--e-global-typography-220b01e-font-family:"Roboto";--e-global-typography-220b01e-font-size:28px;--e-global-typography-220b01e-font-weight:600;--e-global-typography-261dca2-font-family:"Roboto";--e-global-typography-261dca2-font-size:20px;--e-global-typography-261dca2-font-weight:600;--e-global-typography-527725c-font-family:"Roboto";--e-global-typography-527725c-font-size:17px;--e-global-typography-527725c-font-weight:400;--e-global-typography-95ba7e7-font-family:"Roboto";--e-global-typography-95ba7e7-font-size:26px;--e-global-typography-95ba7e7-font-weight:700;--e-global-typography-551c034-font-family:"Roboto";--e-global-typography-551c034-font-size:22px;--e-global-typography-551c034-font-weight:600;--e-global-typography-3a86bbf-font-family:"Roboto";--e-global-typography-3a86bbf-font-size:17px;--e-global-typography-3a86bbf-font-weight:600;--e-global-typography-01f786f-font-family:"Roboto";--e-global-typography-01f786f-font-size:14px;--e-global-typography-01f786f-font-weight:400;--e-global-typography-1597675-font-family:"Roboto";--e-global-typography-1597675-font-size:61px;--e-global-typography-1597675-font-weight:700;--e-global-typography-1597675-letter-spacing:0px;--e-global-typography-14f0a40-font-family:"Roboto";--e-global-typography-14f0a40-font-size:60px;--e-global-typography-14f0a40-font-weight:600;--e-global-typography-14f0a40-line-height:60px;--e-global-typography-25b2b6c-font-family:"Roboto";--e-global-typography-25b2b6c-font-size:46px;--e-global-typography-25b2b6c-font-weight:700;--e-global-typography-25b2b6c-letter-spacing:0px;background-color:#FFFFFF;}.elementor-kit-16 button,.elementor-kit-16 input[type="button"],.elementor-kit-16 input[type="submit"],.elementor-kit-16 .elementor-button{background-color:var( --e-global-color-5831439 );font-family:"Poppins", Roboto;font-size:17px;font-weight:700;color:var( --e-global-color-7ffedcb1 );border-radius:14px 14px 14px 14px;padding:14px 14px 14px 14px;}.elementor-kit-16 button:hover,.elementor-kit-16 button:focus,.elementor-kit-16 input[type="button"]:hover,.elementor-kit-16 input[type="button"]:focus,.elementor-kit-16 input[type="submit"]:hover,.elementor-kit-16 input[type="submit"]:focus,.elementor-kit-16 .elementor-button:hover,.elementor-kit-16 .elementor-button:focus{background-color:var( --e-global-color-7ffedcb1 );color:var( --e-global-color-5831439 );border-radius:14px 14px 14px 14px;}.elementor-kit-16 e-page-transition{background-color:#FFBC7D;}.elementor-kit-16 a{color:var( --e-global-color-5831439 );text-decoration:underline;}.elementor-kit-16 a:hover{color:var( --e-global-color-5831439 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-16{--e-global-typography-1597675-font-size:35px;--e-global-typography-14f0a40-font-size:54px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-16{--e-global-typography-95ba7e7-font-size:30px;--e-global-typography-551c034-font-size:24px;--e-global-typography-3a86bbf-font-size:19px;--e-global-typography-01f786f-font-size:17px;--e-global-typography-1597675-font-size:30px;--e-global-typography-14f0a40-font-size:36px;--e-global-typography-14f0a40-line-height:42px;--e-global-typography-25b2b6c-font-size:30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   CarInspect — Design Tokens for the Elementor Blog Template
   Paste this entire file into:
   Elementor > Site Settings > Custom CSS

   Built from the CarInspect design system (colors_and_type.css)
   plus the helper classes referenced in the Blog Template build guide:
   .ci-pill, .ci-card, .ci-callout, .ci-takeaways, .ci-btn-accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand — Evergreen ---------- */
  --ci-evergreen-900: #082A1E;
  --ci-evergreen-800: #0E3F2D;   /* primary brand green */
  --ci-evergreen-700: #155339;
  --ci-evergreen-600: #1F6B49;
  --ci-evergreen-500: #2E8A5F;
  --ci-evergreen-100: #DCEDE4;
  --ci-evergreen-50:  #F1F8F4;

  /* ---------- Brand — Amber (accent only) ---------- */
  --ci-amber-700: #C28A12;
  --ci-amber-600: #E0A41E;
  --ci-amber-500: #F5B82E;
  --ci-amber-400: #F8C957;
  --ci-amber-100: #FDF0CF;
  --ci-amber-50:  #FEF8E6;

  /* ---------- Neutrals — Asphalt ---------- */
  --ci-asphalt-1000: #0B0F0E;
  --ci-asphalt-900:  #14191A;
  --ci-asphalt-800:  #22292B;
  --ci-asphalt-700:  #3A4346;
  --ci-asphalt-600:  #58656A;
  --ci-asphalt-500:  #7A878D;
  --ci-asphalt-400:  #A4AFB4;
  --ci-asphalt-300:  #C8D1D5;
  --ci-asphalt-200:  #E2E8EA;
  --ci-asphalt-100:  #EFF3F4;
  --ci-asphalt-50:   #F7F9F9;
  --ci-white:        #FFFFFF;
  --ci-paper:        #FBFAF6;

  /* ---------- Semantic verdicts (not used on blog, kept for consistency) ---------- */
  --ci-pass-700:  #1F7A4D;
  --ci-pass-500:  #2EA968;
  --ci-pass-100:  #DCF3E5;
  --ci-watch-700: #B27A0E;
  --ci-watch-500: #F2A007;
  --ci-watch-100: #FCEAC2;
  --ci-fix-700:   #B0331C;
  --ci-fix-500:   #DC4628;
  --ci-fix-100:   #FBDED5;
  --ci-info-500:  #2A6FDB;
  --ci-info-100:  #E1ECFB;

  /* ---------- Semantic tokens ---------- */
  --fg-1: var(--ci-evergreen-900);
  --fg-2: var(--ci-asphalt-700);
  --fg-3: var(--ci-asphalt-500);
  --fg-inverse: var(--ci-white);

  --bg-page:        var(--ci-paper);
  --bg-surface:     var(--ci-white);
  --bg-sunken:      var(--ci-asphalt-50);
  --bg-elevated:    var(--ci-white);
  --bg-brand:       var(--ci-evergreen-800);
  --bg-brand-soft:  var(--ci-evergreen-50);
  --bg-accent:      var(--ci-amber-500);
  --bg-accent-soft: var(--ci-amber-50);

  --border-subtle:  var(--ci-asphalt-200);
  --border-default: var(--ci-asphalt-300);
  --border-strong:  var(--ci-asphalt-700);

  --link: var(--ci-evergreen-700);
  --link-hover: var(--ci-evergreen-900);

  /* ---------- Type families ---------- */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;
  --text-6xl: 4.5rem;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---------- Shadows (asphalt-tinted, never blue) ---------- */
  --shadow-xs: 0 1px 2px 0 rgba(11, 15, 14, 0.04);
  --shadow-sm: 0 2px 6px -1px rgba(11, 15, 14, 0.06), 0 1px 2px -1px rgba(11, 15, 14, 0.04);
  --shadow-md: 0 6px 18px -4px rgba(11, 15, 14, 0.08), 0 2px 6px -2px rgba(11, 15, 14, 0.05);
  --shadow-lg: 0 18px 36px -12px rgba(11, 15, 14, 0.16), 0 6px 12px -4px rgba(11, 15, 14, 0.06);
  --shadow-xl: 0 32px 56px -20px rgba(11, 15, 14, 0.22), 0 12px 18px -6px rgba(11, 15, 14, 0.08);
  --shadow-focus: 0 0 0 3px rgba(245, 184, 46, 0.45);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* ============================================================
   BASE TYPE STYLES
   ============================================================ */
.ci-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.ci-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.ci-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.ci-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ci-evergreen-700);
}

.ci-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
}

.ci-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

/* ============================================================
   BLOG TEMPLATE COMPONENTS
   Referenced by the Elementor Blog Template build guide.
   Apply these as CSS Classes in each widget's Advanced tab.
   ============================================================ */

/* --- Category pill (sits above the post title) --- */
.ci-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ci-evergreen-700);
  background: var(--ci-evergreen-100);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}

/* --- Generic card (sidebar "Book" card, related-post cards, etc.) --- */
.ci-card {
  background: var(--bg-surface);
  border: 1px solid var(--ci-asphalt-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.ci-card:hover {
  box-shadow: var(--shadow-sm);
}

/* --- Callout box (inspector's tip / advice blocks in article body) --- */
.ci-callout {
  background: var(--bg-accent-soft);
  border: 1px solid var(--ci-amber-100);
  border-left: 4px solid var(--ci-amber-500);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
}
.ci-callout p:last-child { margin-bottom: 0; }

/* --- Key takeaways box (evergreen-tinted summary block) --- */
.ci-takeaways {
  background: var(--bg-brand-soft);
  border: 1px solid var(--ci-evergreen-100);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}
.ci-takeaways .ci-h4,
.ci-takeaways strong:first-child {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ci-evergreen-800);
}
.ci-takeaways ul {
  margin: var(--space-3) 0 0;
  padding-left: 1.2em;
}
.ci-takeaways li {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
  margin-bottom: var(--space-2);
}

/* --- Accent button (secondary CTA — amber, used sparingly) --- */
.ci-btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ci-amber-500);
  color: var(--ci-evergreen-900);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.ci-btn-accent:hover {
  background: var(--ci-amber-600);
}
.ci-btn-accent:active {
  transform: scale(0.97);
}
.ci-btn-accent:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* --- Document defaults --- */
body { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-page); }
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }/* End custom CSS */