#d7-neuro-map-mockup {
  --d7m-navy: #0d5590;
  --d7m-navy-solid: #075b96;
  --d7m-teal: #0a77a8;
  --d7m-gold: #4cbb17;
  --d7m-fern: #4cbb17;
  --d7m-fern-dark: #318b0c;
  --d7m-fern-tint: #e5f7dc;
  --d7m-blue-tint: #e8f3fa;
  --d7m-bg: #edf4f8;
  --d7m-panel-alt: #f3f7fa;
  --d7m-border: #ccdae5;
  --d7m-land: #f9fbfc;
  --d7m-water: #b9ddea;
  --d7m-road: #bdcbd6;
}

#d7-neuro-map-mockup .d7m-shell {
  border-radius: 0;
  background: var(--d7m-water);
  box-shadow: none;
}

#d7-neuro-map-mockup .d7m-sidebar {
  box-shadow: 12px 0 32px rgba(12, 70, 112, .08);
}

#d7-neuro-map-mockup .d7m-sidebar header {
  min-height: 166px;
  padding: 22px 20px 24px;
  background:
    radial-gradient(circle at 85% 18%, rgba(255,255,255,.13) 0 2px, transparent 2.5px) 0 0 / 18px 18px,
    linear-gradient(140deg, #074b82 0%, #1268a3 62%, #0b5a91 100%);
}

#d7-neuro-map-mockup .d7m-sidebar header::before {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -52px;
  width: 160px;
  height: 160px;
  border: 25px solid rgba(255,255,255,.1);
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(45deg);
}

#d7-neuro-map-mockup .d7m-sidebar header::after {
  right: 0;
  width: 42%;
  height: 6px;
  background: linear-gradient(90deg, var(--d7m-fern), #75d54a);
}

#d7-neuro-map-mockup .d7m-brand-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#d7-neuro-map-mockup .d7m-brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 10px 4px 10px 4px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.04em;
  box-shadow: 0 8px 22px rgba(0, 31, 59, .18);
}

#d7-neuro-map-mockup .d7m-brand-mark::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 22px;
  height: 22px;
  background: var(--d7m-fern);
  transform: rotate(45deg);
  opacity: .92;
}

#d7-neuro-map-mockup .d7m-kicker {
  margin: 0;
  color: #dff4ff;
  font-size: 10px;
  line-height: 1.25;
}

#d7-neuro-map-mockup h1,
#d7-neuro-map-mockup .d7m-subtitle {
  position: relative;
  z-index: 1;
}

#d7-neuro-map-mockup h1 {
  max-width: 260px;
  font-size: 25px;
  letter-spacing: -.035em;
}

#d7-neuro-map-mockup .d7m-subtitle {
  max-width: 270px;
  color: #eaf6fd;
}

#d7-neuro-map-mockup .d7m-mode-tabs {
  gap: 3px;
  padding: 5px;
  border: 1px solid #dae5ed;
  border-radius: 14px;
  background: #edf3f7;
}

#d7-neuro-map-mockup .d7m-page-link {
  border-radius: 10px;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

#d7-neuro-map-mockup .d7m-page-link[aria-current="page"] {
  background: #fff;
  color: var(--d7m-navy);
  box-shadow: 0 4px 14px rgba(13, 85, 144, .12), inset 0 -3px 0 var(--d7m-fern);
}

#d7-neuro-map-mockup input[type="search"],
#d7-neuro-map-mockup select {
  border-radius: 12px;
  border-color: #c7d8e4;
  box-shadow: inset 0 1px 2px rgba(22, 92, 153, .03);
}

#d7-neuro-map-mockup input[type="search"]:focus,
#d7-neuro-map-mockup select:focus {
  outline: 3px solid rgba(76, 187, 23, .18);
  border-color: var(--d7m-fern);
}

#d7-neuro-map-mockup .d7m-check {
  border-radius: 11px;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

#d7-neuro-map-mockup .d7m-check:has(input:checked) {
  border-color: rgba(76, 187, 23, .56);
  background: linear-gradient(135deg, #f7fcf4, var(--d7m-fern-tint));
}

#d7-neuro-map-mockup .d7m-action {
  border-radius: 10px;
  transition: transform .15s ease, box-shadow .15s ease;
}

#d7-neuro-map-mockup .d7m-action:hover,
#d7-neuro-map-mockup .d7m-action:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(13, 85, 144, .12);
}

#d7-neuro-map-mockup #d7m-sidebar-fit {
  background: linear-gradient(135deg, #57c91e, #3ead11);
  border-color: #3ead11;
  color: #133a07;
  box-shadow: 0 7px 16px rgba(76, 187, 23, .2);
}

#d7-neuro-map-mockup .d7m-stats {
  gap: 6px;
}

#d7-neuro-map-mockup .d7m-stat {
  position: relative;
  overflow: hidden;
  min-height: 67px;
  border: 1px solid #dbe6ed;
  border-radius: 13px;
  background: linear-gradient(150deg, #fff 0%, #f2f7fa 100%);
  box-shadow: 0 5px 14px rgba(13, 85, 144, .06);
}

#d7-neuro-map-mockup .d7m-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 3px;
  background: var(--d7m-fern);
}

#d7-neuro-map-mockup .d7m-stat strong {
  font-size: 22px;
  letter-spacing: -.04em;
}

#d7-neuro-map-mockup .d7m-detail {
  position: relative;
  overflow: hidden;
  border: 1px solid #d9e5ed;
  border-left: 0;
  border-radius: 12px;
  background: linear-gradient(155deg, #fff 0%, #f3f8fb 100%);
  box-shadow: 0 6px 18px rgba(13, 85, 144, .07);
}

#d7-neuro-map-mockup .d7m-detail::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--d7m-fern);
}

#d7-neuro-map-mockup .d7m-detail.employer::before {
  background: linear-gradient(180deg, var(--d7m-fern), var(--d7m-navy));
}

#d7-neuro-map-mockup .d7m-detail.resource::before {
  background: linear-gradient(180deg, var(--d7m-navy), #39a6c8);
}

#d7-neuro-map-mockup .d7m-detail h2 {
  font-size: 16px;
  letter-spacing: -.02em;
}

#d7-neuro-map-mockup .d7m-badge {
  border-radius: 8px;
  background: #fff;
}

#d7-neuro-map-mockup .d7m-badge.designation {
  box-shadow: inset 0 0 0 1px rgba(76,187,23,.15);
}

#d7-neuro-map-mockup .d7m-result {
  border-left: 3px solid transparent;
  border-radius: 6px 10px 10px 6px;
}

#d7-neuro-map-mockup .d7m-result:hover,
#d7-neuro-map-mockup .d7m-result:focus-visible {
  border-left-color: var(--d7m-fern);
  background: linear-gradient(90deg, var(--d7m-fern-tint), var(--d7m-panel-alt));
}

#d7-neuro-map-mockup .d7m-map-wrap {
  background-color: var(--d7m-water);
  background-image: linear-gradient(180deg, rgba(255,255,255,.18), transparent 42%);
  background-size: 100% 100%;
}

#d7-neuro-map-mockup .d7m-south-florida-county {
  fill: #ffffff;
  stroke: #50768d;
  stroke-width: 2;
  filter: drop-shadow(0 3px 3px rgba(24, 74, 105, .1));
  vector-effect: non-scaling-stroke;
}

#d7-neuro-map-mockup .d7m-south-florida-county:nth-of-type(even) {
  fill: #eaf4ee;
}

#d7-neuro-map-mockup .d7m-south-florida-county.is-miami-dade {
  fill: #dff3d5;
  stroke: var(--d7m-fern-dark);
  stroke-width: 2.5;
}

#d7-neuro-map-mockup .d7m-county-label {
  fill: #405e72;
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  paint-order: stroke;
  stroke: rgba(255,255,255,.96);
  stroke-width: 6px;
  stroke-linejoin: round;
  pointer-events: none;
}

#d7-neuro-map-mockup .d7m-county-label.is-miami-dade {
  fill: #2f790f;
}

#d7-neuro-map-mockup .d7m-region-title {
  fill: #35677f;
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .16em;
  opacity: .72;
  pointer-events: none;
}

#d7-neuro-map-mockup[data-zoom-detail="overview"] .d7m-land {
  fill: none !important;
}

#d7-neuro-map-mockup .d7m-land {
  fill: none !important;
  stroke: #8ea7b8;
  stroke-width: 1.15;
}

#d7-neuro-map-mockup .d7m-district-7 { stroke: var(--d7m-fern-dark); stroke-width: 1.7; }

#d7-neuro-map-mockup .d7m-road-secondary {
  stroke: #c1ced7;
  opacity: .58;
}

#d7-neuro-map-mockup .d7m-road-primary {
  stroke: #849cac;
  opacity: .72;
}

#d7-neuro-map-mockup .d7m-district-label {
  fill: #165c99;
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  stroke: rgba(255,255,255,.92);
  stroke-width: 7px;
  stroke-linejoin: round;
}

#d7-neuro-map-mockup .d7m-place-label {
  display: block !important;
  fill: #37556a;
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .015em;
  stroke: rgba(249,251,252,.95);
  stroke-width: 4.5px;
  opacity: .78;
}

#d7-neuro-map-mockup[data-zoom-detail="overview"] .d7m-place-label.local,
#d7-neuro-map-mockup[data-zoom-detail="overview"] .d7m-district-label {
  display: none !important;
}

#d7-neuro-map-mockup[data-zoom-detail="overview"] .d7m-place-label.regional {
  display: block !important;
  font-size: 10px;
  opacity: .9;
}

#d7-neuro-map-mockup[data-zoom-detail="detail"] .d7m-county-label {
  opacity: .28;
}

#d7-neuro-map-mockup .d7m-water-label {
  fill: #5693b1;
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  opacity: .58;
  pointer-events: none;
}

#d7-neuro-map-mockup .d7m-florida-inset {
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(13, 85, 144, .17));
}

#d7-neuro-map-mockup .d7m-florida-inset-frame {
  fill: rgba(255,255,255,.94);
  stroke: rgba(13,85,144,.18);
  stroke-width: 1;
}

#d7-neuro-map-mockup .d7m-florida-inset-title {
  fill: var(--d7m-navy);
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

#d7-neuro-map-mockup .d7m-florida-county {
  fill: #edf5f8;
  stroke: #9fb3c1;
  stroke-width: .42;
  vector-effect: non-scaling-stroke;
}

#d7-neuro-map-mockup .d7m-florida-county.is-miami-dade {
  fill: var(--d7m-fern);
  stroke: var(--d7m-fern-dark);
  stroke-width: 1;
}

#d7-neuro-map-mockup .d7m-florida-locator-dot {
  fill: #fff;
  stroke: var(--d7m-fern-dark);
  stroke-width: 1.5;
}

#d7-neuro-map-mockup .d7m-florida-locator-label {
  fill: #245d10;
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .05em;
}

#d7-neuro-map-mockup .d7m-map-marker {
  width: 36px;
  height: 36px;
}

#d7-neuro-map-mockup .d7m-map-marker::before {
  width: 15px;
  height: 15px;
  border-width: 3px;
  border-color: #fff;
  box-shadow: 0 4px 11px rgba(18, 64, 94, .3);
  transition: width .14s ease, height .14s ease, box-shadow .14s ease, outline-color .14s ease;
}

#d7-neuro-map-mockup .d7m-map-marker:hover::before,
#d7-neuro-map-mockup .d7m-map-marker:focus-visible::before {
  width: 19px;
  height: 19px;
  box-shadow: 0 5px 15px rgba(18, 64, 94, .36);
}

#d7-neuro-map-mockup .d7m-map-marker.employer::before {
  background: linear-gradient(135deg, #63cf2c, #349d0a);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(49,139,12,.3);
}

#d7-neuro-map-mockup .d7m-map-marker.resource::before {
  background: linear-gradient(135deg, #147eb2, #07558e);
}

#d7-neuro-map-mockup .d7m-map-marker.resource.feature-sensory-room::before {
  border-radius: 4px;
}

#d7-neuro-map-mockup .d7m-map-marker.resource.feature-sensory-kit::before {
  border-radius: 2px;
  clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
}

#d7-neuro-map-mockup .d7m-map-marker.resource.feature-social-story::before {
  width: 13px;
  height: 17px;
  border-radius: 2px 6px 2px 2px;
}

#d7-neuro-map-mockup .d7m-map-marker.resource.feature-sensory-events::before {
  background: #0a77a8;
  box-shadow: 0 0 0 4px rgba(10,119,168,.15), 0 4px 11px rgba(18,64,94,.28);
}

#d7-neuro-map-mockup .d7m-map-marker.resource.feature-autism-friendly::before {
  outline: 2px solid var(--d7m-fern);
  outline-offset: 2px;
}

#d7-neuro-map-mockup .d7m-map-marker.group-match::before,
#d7-neuro-map-mockup .d7m-map-marker.selected::before {
  outline: 4px solid var(--d7m-fern);
  outline-offset: 3px;
  box-shadow: 0 0 0 8px rgba(255,255,255,.84), 0 7px 18px rgba(20,67,96,.32);
}

#d7-neuro-map-mockup .d7m-map-marker.selected::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 2px solid rgba(76,187,23,.28);
  border-radius: 50%;
  animation: d7m-selection-pulse 1.8s ease-out infinite;
}

@keyframes d7m-selection-pulse {
  0% { transform: scale(.55); opacity: .9; }
  70%, 100% { transform: scale(1.15); opacity: 0; }
}

#d7-neuro-map-mockup .d7m-map-marker.cluster::before {
  width: 34px;
  height: 34px;
  background: linear-gradient(145deg, #0c6da6, #074a80);
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(13,85,144,.15), 0 7px 16px rgba(13,62,96,.24);
}

#d7-neuro-map-mockup .d7m-map-marker.cluster.employer-cluster::before {
  background: linear-gradient(145deg, #59c925, #2f9209);
  box-shadow: 0 0 0 3px rgba(76,187,23,.18), 0 7px 16px rgba(38,104,12,.22);
}

#d7-neuro-map-mockup .d7m-map-marker.cluster span {
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
}

#d7-neuro-map-mockup .d7m-map-toolbar {
  top: 18px;
  right: 18px;
}

#d7-neuro-map-mockup .d7m-map-button,
#d7-neuro-map-mockup .d7m-fit-button {
  border-color: rgba(13,85,144,.16);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(13,85,144,.14);
  backdrop-filter: blur(8px);
}

#d7-neuro-map-mockup .d7m-legend {
  left: 18px;
  bottom: 18px;
  border: 1px solid rgba(13,85,144,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 9px 28px rgba(13,85,144,.13);
  backdrop-filter: blur(10px);
}

#d7-neuro-map-mockup .d7m-legend i {
  width: 11px;
  height: 11px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(13,85,144,.14);
}

#d7-neuro-map-mockup .d7m-legend i.employer {
  background: var(--d7m-fern);
}

#d7-neuro-map-mockup .d7m-legend i.autism {
  background: #fff;
  border: 2px solid var(--d7m-fern);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  #d7-neuro-map-mockup .d7m-map-marker.selected::after { animation: none; }
  #d7-neuro-map-mockup .d7m-map-marker::before,
  #d7-neuro-map-mockup .d7m-action,
  #d7-neuro-map-mockup .d7m-check { transition: none; }
}

@media (max-width: 760px) {
  #d7-neuro-map-mockup .d7m-sidebar { box-shadow: none; }
  #d7-neuro-map-mockup .d7m-sidebar header { min-height: 152px; }
  #d7-neuro-map-mockup .d7m-map-toolbar { top: 12px; right: 12px; }
  #d7-neuro-map-mockup .d7m-legend { left: 12px; bottom: 12px; }
}

@media (max-width: 420px) {
  #d7-neuro-map-mockup h1 { font-size: 23px; }
  #d7-neuro-map-mockup .d7m-brand-mark { width: 34px; height: 34px; }
}
