.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.dm-sans {
  font-family: 'DM Sans', sans-serif;
}
/* .form-control is listed too, since Bootstrap's .form-control::placeholder would otherwise win */
::placeholder,
.form-control::placeholder {
  color: var(--bs-tertiary-color);
}
#home_hero_image {
  background-image: url("/images/AdobeStock_325720179.webp");
  background-size: cover;
  background-position: center left;
}
#home_subhead {
  font-size: 21px;
}
/* CMA request modal (cma.hbs) */
#check_icon {
  width: 52px;
  height: 52px;
}
#request_cma .modal-body {
  line-height:165%;
}

/* homevalue.hbs report state */
#hv_hero_left,
#hv_hero_photo {
  flex: 1 1 0;
  min-width: 0;
}
#hv_hero_photo {
  background-size: cover;
  background-position: center;
}
#hv_stats_grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#hv_address_overlay {
  left: 14px;
  top: 14px;
}
#hv_agent_avatar {
  width: 148px;
  height: 148px;
  background-size: cover;
  background-position: center;
}
.hv-nav-arrow {
  width: 21px;
  height: 21px;
}
.hv-nav-arrow:disabled {
  opacity: 0.4;
}
#hv_comps_scroll {
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#hv_comps_scroll::-webkit-scrollbar {
  display: none;
}
.hv-comp-card {
  scroll-snap-align: start;
}
/* Mobile shows one full-width card per swipe (col-12 in the template) */
@media (min-width: 992px) {
  .hv-comp-card {
    width: 260px;
  }
}
.hv-comp-photo {
  height: 162.5px;
}
/* Street-view placeholder for comps with no photo; map lines are from the Figma comp card */
.hv-comp-photo-empty {
  background: #e6eaf0 url('/images/my-home-est/comp-map-lines.svg') top left / 260px 162.5px no-repeat;
}
.hv-comp-photo-icon {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 4px 4px rgba(24, 49, 83, 0.07));
}
.hv-comp-price-tag {
  top: 10px;
  left: 12px;
}
.hv-dot {
  width: 26px;
  height: 6px;
}

#hv_chart_area {
  height: 200px; /* design's 160px plot + the month labels Chart.js draws inside it */
}
.hv-trend-stat-tile {
  flex: 1;
}
#hv_map_card {
  min-height: 300px;
}
/* Side by side (lg+), split like the design's 802px / 460px. Basis 0 keeps the split independent
   of content: the map card's children are all absolutely positioned (no width of its own), and
   the chart's canvas would otherwise grow the trend card and squeeze the map to 0 width.
   Either card alone fills the row. */
@media (min-width: 992px) {
  #hv_trend_card {
    flex: 1.75 1 0;
    min-width: 0;
  }
  #hv_map_card {
    flex: 1 1 0;
  }
}
#hv_map_caption {
  left: 13px;
  top: 13px;
}
/* Own stacking context, so Google Maps' internal z-indexes can't cover the caption/legend */
#hv_map {
  z-index: 0;
}
#hv_map_legend {
  left: 13px;
  right: 13px;
  bottom: 13px;
}
.hv-legend-dot {
  width: 10px;
  height: 10px;
}

@media (max-width: 991.98px) {
  #hv_hero_photo {
    min-height: 220px;
  }
  #hv_stats_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* One dot per comp on mobile, so they're sized down to fit between the arrows */
  .hv-dot {
    width: 5px;
    height: 5px;
  }
  .hv-dot[aria-current="true"] {
    width: 14px;
  }
}