.categories-intro-copy {
  max-width: 245px;
  display: grid;
  justify-items: start;
  gap: 5px;
}

.categories-intro-copy > p { margin: 0; }
.categories-more-link {
  color: var(--gold);
  font: 700 9px var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.categories-more-link span { margin-left: 4px; }

.path-card {
  isolation: isolate;
  color: #fff;
  border: 1px solid #4a5048;
}
.path-card::before,
.path-card::after {
  position: absolute;
  content: "";
  inset: 0;
  z-index: -1;
}
.path-card::before {
  background-position: center;
  background-size: cover;
  transition: transform .55s ease;
}
.path-card::after {
  background: linear-gradient(90deg, #111812dc 0%, #111812a8 56%, #11181235 100%);
}
.path-card:hover::before { transform: scale(1.04); }
.path-card.customer::before {
  background-image: url("/__l5e/assets-v1/a43e8aa7-f22a-47d6-9716-70cf9e979eda/photo-1600210492486-724fe5c67fb0.jpg");
}
.path-card.pro::before {
  background-image: url("/__l5e/assets-v1/a8856856-9961-4894-8edd-74997581b63f/photo-1556911220-bff31c812dba.jpg");
}
.path-card .path-label,
.path-card h3,
.path-card p,
.path-card .path-steps span,
.path-card>a,
.path-card .path-number,
.path-card .path-icon {
  color: #fff;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 8px #0008;
}
.path-card .path-icon { border-color: #ffffff80; }
.path-card .path-steps b { color: #e1c998; }
.path-card .path-number { color: #ffffff70; }
.path-card a { text-decoration: underline; text-decoration-color: #ffffff80; text-underline-offset: 4px; }

.tiles button {
  height: 51px;
  display: grid;
  place-items: center;
  min-width: 0;
  border: 0;
  padding: 7px 2px 5px;
  border-radius: 3px;
  background: #232722;
  color: #bec6ba;
  font-size: 17px;
  transition: background .2s, transform .2s;
}
.tiles button:hover,
.tiles button.is-active { background: #414a40; transform: translateY(-2px); }
.tiles button small { display: block; font-size: 7px; line-height: 1.3; }
.map-pin {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.map-pin:hover,
.map-pin.is-active { transform: scale(1.18); box-shadow: 0 0 0 4px #f4efe433, 0 3px 8px #0008; }
.map-locate { cursor: pointer; border: 0; }
.screen-tabs button {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 15px;
  padding: 5px 11px;
  border-radius: 12px;
}
.screen-tabs button:hover,
.screen-tabs button.is-active { background: #323a32; color: #e1c998; }
.phone-feedback {
  position: absolute;
  z-index: 8;
  left: 12px;
  right: 12px;
  bottom: 42px;
  padding: 8px 10px;
  border: 1px solid #596253;
  border-radius: 4px;
  background: #111611ed;
  color: #f3efe6;
  font: 600 8px/1.35 var(--display);
  text-align: center;
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.phone-feedback.is-visible { opacity: 1; transform: translateY(0); }
.hero-phone, .screen { cursor: pointer; }
.hero-phone :is(.mini-card, .searchbar, .phone-label small, .cat-mini span, .phone-profile-row, .bottom-nav button),
.screen :is(.map-pin, .map-locate, .map-search, .map-result, .screen-row, .screen-search, .tiles button, .provider-tile, .screen-tabs button) { cursor: pointer; }
.mini-card.is-selected, .provider-tile.is-selected, .map-result.is-selected,
.phone-profile-row.is-selected { outline: 2px solid #c7ad7c; outline-offset: 1px; }
.searchbar.is-focused, .screen-search.is-focused, .map-search.is-focused { outline: 2px solid #c7ad7c; }
.screen-content[data-app-view="favorites"] .screen-search,
.screen-content[data-app-view="profile"] .screen-search { opacity: .55; }
.screen-content[data-app-view="profile"] .tiles { opacity: .5; }

@media (max-width: 700px) {
  .categories-intro-copy { max-width: none; }
  .path-card::after { background: linear-gradient(90deg, #111812e8 0%, #111812b8 72%, #11181270 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .path-card::before, .tiles button, .map-pin { transition: none; }
}