.elementor-kit-403{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-c3c4d60-font-family:"Newsreader";--e-global-typography-c3c4d60-font-weight:500;background-color:transparent;background-image:linear-gradient(180deg, #ECE4D5 0%, #ECE4D5 100%);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-403 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --Gold:#B0883F; --Headlines:Newsreader; --Paragraphs:Public Sans; --Blue-Headlines:#0F2C4D; --Blue-Copy:#6B7785; --Main-Headline:58px; }
/* Start custom CSS *//* ==========================================================================
   Leelou — Home Evaluation Tool Page (dev_main) — Custom CSS
   Paste into: Elementor > Edit dev_main page > hamburger menu (bottom left)
   > Page Settings > Advanced > Custom CSS.
   Scoped to this page only — will not affect any other page on the live site.

   Usage: add the matching class name(s) below to each widget/section via
   Elementor's Advanced tab > CSS Classes field. Classes are additive, so a
   widget can carry more than one (e.g. "leelou-btn leelou-btn--navy").
   ========================================================================== */

:root {
  --leelou-navy: #0f2c4d;
  --leelou-gold: #b0883f;
  --leelou-cream-light: #f7f4ee;
  --leelou-cream-dark: #f1ece1;
  --leelou-text-gray: #566472;
  --leelou-border: #e5e0d5;
  --leelou-radius: 4px;
  --leelou-radius-lg: 8px;
  --font-heading: 'Newsreader', serif;
  --font-caption: 'Public Sans', sans-serif;
}

/* ---------- Typography ---------- */

.leelou-eyebrow {
  font-family: var(--font-caption);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leelou-gold);
  margin-bottom: 12px;
  display: block;
}

.leelou-h1,
.leelou-h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 58px;
  line-height: 1.15;
  color: var(--leelou-navy);
  margin: 0 0 16px;
}

.leelou-h2--sub {
  font-size: 34px;
}

.leelou-body {
  font-size: 18px;
  line-height: 1.6;
  color: var(--leelou-text-gray);
  margin: 0 0 24px;
}

.leelou-body--small {
  font-size: 13px;
  color: var(--leelou-text-gray);
}

.leelou-link {
  color: var(--leelou-navy);
  font-weight: 600;
  text-decoration: none;
}
.leelou-link:hover {
  color: var(--leelou-gold);
}

/* ---------- Buttons ---------- */

.leelou-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--leelou-radius);
  font-family: var(--font-caption);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
  text-decoration: none;
}
.leelou-btn:hover {
  opacity: 0.9;
}

.leelou-btn--navy {
  background: var(--leelou-navy);
  color: #ffffff;
}

.leelou-btn--gold {
  background: var(--leelou-gold);
  color: var(--leelou-navy);
}

.leelou-btn--compact {
  padding: 10px 20px;
  font-size: 13px;
}

.leelou-btn--blue {
  background: #2f6fed;
  color: #ffffff;
  padding: 8px 16px;
  font-size: 12px;
}

/* ---------- Section backgrounds ---------- */

.leelou-bg-cream {
  background: linear-gradient(180deg, var(--leelou-cream-light) 0%, var(--leelou-cream-dark) 100%);
}

.leelou-bg-navy {
  background: var(--leelou-navy);
}
.leelou-bg-navy .leelou-h2,
.leelou-bg-navy .leelou-body {
  color: #ffffff;
}
.leelou-bg-navy .leelou-body {
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Top bar (Section 1) ---------- */

.leelou-topbar {
  border-bottom: 1px solid var(--leelou-border);
  padding: 24px 0;
}

.leelou-logo {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--leelou-navy);
  letter-spacing: 0.02em;
}
.leelou-logo::after {
  content: '.';
  color: var(--leelou-gold);
}

/* ---------- Hero (Section 2) ---------- */

.leelou-hero {
  padding: 100px 0;
}

.leelou-hero-form {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin-bottom: 20px;
}

.leelou-input {
  flex: 1;
  padding: 14px 18px;
  border: 1px solid var(--leelou-border);
  border-radius: var(--leelou-radius);
  font-family: var(--font-caption);
  font-size: 14px;
  color: var(--leelou-navy);
  background: #ffffff;
}
.leelou-input::placeholder {
  color: #9aa3ad;
}

.leelou-trust-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--leelou-text-gray);
}
.leelou-trust-row .stars {
  color: var(--leelou-gold);
  letter-spacing: 2px;
}

.leelou-hero-card {
  background: #ffffff;
  border-radius: var(--leelou-radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(15, 44, 77, 0.12);
}

.leelou-hero-card__image {
  background: var(--leelou-navy);
  color: #ffffff;
  min-height: 200px;
  position: relative;
  padding: 16px;
}

.leelou-chip {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

.leelou-hero-card__body {
  padding: 24px;
}

.leelou-value-label {
  font-family: var(--font-caption);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leelou-text-gray);
}

.leelou-value-figure {
  font-family: var(--font-heading);
  font-size: 34px;
  color: var(--leelou-navy);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.leelou-value-figure .delta {
  font-family: var(--font-caption);
  font-size: 13px;
  font-weight: 600;
  color: #3a8a5c;
}

.leelou-equity-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--leelou-cream-dark);
  overflow: hidden;
  margin: 16px 0 8px;
}
.leelou-equity-bar__fill {
  height: 100%;
  background: var(--leelou-gold);
  width: 62%; /* adjust per data */
}

.leelou-stat-row {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.leelou-stat-box {
  flex: 1;
  background: var(--leelou-cream-light);
  border-radius: var(--leelou-radius);
  padding: 14px 16px;
}
.leelou-stat-box__value {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--leelou-navy);
}
.leelou-stat-box__label {
  font-size: 12px;
  color: var(--leelou-text-gray);
}

/* ---------- Feature grid (Section 3) ---------- */

.leelou-feature-grid {
  border-top: 1px solid var(--leelou-border);
  border-left: 1px solid var(--leelou-border);
}

.leelou-feature-cell {
  border-right: 1px solid var(--leelou-border);
  border-bottom: 1px solid var(--leelou-border);
  padding: 32px;
}

.leelou-feature-index {
  font-family: var(--font-caption);
  font-size: 12px;
  color: #9aa3ad;
  margin-bottom: 10px;
  display: block;
}

.leelou-feature-title {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--leelou-navy);
  margin-bottom: 8px;
}

.leelou-feature-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--leelou-text-gray);
}

.leelou-feature-cell--cta {
  background: var(--leelou-navy);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.leelou-feature-cell--cta .leelou-feature-title {
  color: #ffffff;
}

.leelou-feature-cell--tan {
  background: var(--leelou-cream-dark);
}

/* ---------- Cards (specialist / blog) ---------- */

.leelou-card {
  background: #ffffff;
  border: 1px solid var(--leelou-border);
  border-radius: var(--leelou-radius-lg);
  padding: 32px;
}

.leelou-card__title {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--leelou-navy);
  margin: 8px 0 12px;
}

.leelou-blog-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #e2e2e2;
  border-radius: var(--leelou-radius);
  margin-bottom: 16px;
}

.leelou-blog-card__title {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--leelou-navy);
  margin: 8px 0;
}

/* ---------- ISP finder rows (Section 8) ---------- */

.leelou-isp-card {
  background: #ffffff;
  border-radius: var(--leelou-radius-lg);
  box-shadow: 0 12px 32px rgba(15, 44, 77, 0.1);
  padding: 20px;
}

.leelou-isp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--leelou-border);
}
.leelou-isp-row:last-of-type {
  border-bottom: none;
}

.leelou-isp-row__name {
  font-weight: 600;
  color: var(--leelou-navy);
  font-size: 14px;
}
.leelou-isp-row__type {
  font-size: 12px;
  color: var(--leelou-text-gray);
}
.leelou-isp-row__speed {
  font-size: 13px;
  color: var(--leelou-text-gray);
}

/* ---------- Footer (Section 10) ---------- */

.leelou-footer {
  border-top: 1px solid var(--leelou-border);
  padding: 32px 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .leelou-h1,
  .leelou-h2 {
    font-size: 44px;
  }
}

@media (max-width: 767px) {
  .leelou-hero {
    padding: 60px 0;
  }
  .leelou-h1,
  .leelou-h2 {
    font-size: 34px;
  }
  .leelou-hero-form {
    flex-direction: column;
    max-width: 100%;
  }
  .leelou-feature-grid,
  .leelou-feature-cell {
    border-right: none;
  }
  .leelou-stat-row {
    flex-direction: column;
  }
}/* End custom CSS */