/* Home sections BELOW the hero: Explore <City> band, city switcher row, Latest in <City>,
   Popular areas, Browse by category, Owner CTAs, Projects & Updates. */
body.home {
  --hx-g: #168B3D;
  --hx-gd: #0f7132;
  --hx-o: #FF8500;
  --hx-ink: #10243B;
  --hx-mu: #5a6a7e;
  --hx-line: #e2e8f0;
  --hx-card: #ffffff;
  --hx-soft: #f4fbf6;
  --hx-sh: 0 4px 20px -8px rgba(15, 35, 60, 0.12), 0 1px 3px rgba(15, 35, 60, 0.04);
  --hx-sh-hover: 0 16px 32px -12px rgba(15, 35, 60, 0.2);
}

html[data-theme="dark"] body.home {
  --hx-ink: #eef3f9;
  --hx-mu: #9aa9bc;
  --hx-line: #223046;
  --hx-card: #121e33;
  --hx-soft: #0c182b;
  --hx-g: #2ea36a;
}

body.home .wrap {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 24px;
}

.hx-explore,
.hx-cityrow,
.hx-sec {
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  color: var(--hx-ink);
}

.hx-explore h2,
.hx-sec h2,
.hx-exh {
  font-family: var(--font-head, Poppins, system-ui, sans-serif);
}

/* ==================== Shared Section Head ==================== */
.hx-sh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 28px;
}

.hx-sh>div {
  position: relative;
  padding-left: 18px;
  min-width: 0;
}

.hx-sh>div:before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 4px;
  background: var(--hx-g);
}

.hx-eb {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #e2701c;
  margin-bottom: 3px;
}

.hx-sh h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hx-ink);
}

.hx-sh h2 em {
  font-style: normal;
  color: var(--hx-g);
}

.hx-sh p {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--hx-mu);
}

.hx-more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--hx-g);
  color: var(--hx-g);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  background: var(--hx-card);
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(22,139,61, 0.06);
}

.hx-more:hover {
  background: var(--hx-g);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22,139,61, 0.25);
}

.hx-sec {
  padding: 48px 0;
}

/* ==================== 1. Explore Band ==================== */
.hx-explore {
  padding: 24px 0 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(244, 251, 246, 0.6) 100%);
  border-bottom: 1px solid var(--hx-line);
}

html[data-theme="dark"] .hx-explore {
  background: none;
}

.hx-exin {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hx-exh {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hx-exh span {
  font-size: 22px;
  font-weight: 700;
  color: var(--hx-ink);
}

.hx-exh b {
  font-size: 32px;
  font-weight: 800;
  color: var(--hx-g);
  letter-spacing: -0.02em;
}

.hx-swoosh {
  width: 80px;
  height: 10px;
  margin-left: 6px;
}

.hx-exr {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Area Chips row */
.hx-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 8px;
}

.hx-chips::-webkit-scrollbar {
  display: none;
}

.hx-chips a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--hx-card);
  border: 1.5px solid var(--hx-line);
  box-shadow: 0 2px 6px rgba(15, 35, 60, 0.05);
  color: var(--hx-ink);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.2s ease;
}

.hx-chips a i {
  font-size: 15px;
  color: var(--hx-mu);
}

.hx-chips a:hover {
  border-color: var(--hx-g);
  color: var(--hx-g);
  transform: translateY(-1px);
}

.hx-chips a.on {
  background: var(--hx-g);
  border-color: var(--hx-g);
  color: #fff;
  box-shadow: 0 4px 12px rgba(22,139,61, 0.3);
}

.hx-chips a.on i {
  color: #fff;
}

/* Property Groups (Flats, PG, Commercial...) */
.hx-grps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.hx-grp {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--hx-card);
  border: 1px solid var(--hx-line);
  box-shadow: var(--hx-sh);
  text-decoration: none;
  color: var(--hx-ink);
  transition: all 0.2s ease;
}

.hx-grp:hover {
  transform: translateY(-2px);
  box-shadow: var(--hx-sh-hover);
  border-color: rgba(22,139,61, 0.3);
}

.hx-gi {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tb);
  color: var(--tf);
  font-size: 22px;
}

html[data-theme="dark"] .hx-gi {
  background: color-mix(in srgb, var(--tf) 18%, transparent);
}

.hx-gt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hx-gt b {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--hx-ink);
}

.hx-gt em {
  font-style: normal;
  font-size: 12px;
  color: var(--hx-mu);
  margin-top: 2px;
}

/* ==================== 2. City Switcher Row ==================== */
.hx-cityrow {
  padding: 12px 0 8px;
}

.hx-crin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hx-cities {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px;
}

.hx-cities::-webkit-scrollbar {
  display: none;
}

.hx-cities a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  background: var(--hx-card);
  border: 1px solid var(--hx-line);
  color: var(--hx-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.hx-cities a:hover {
  border-color: var(--hx-g);
  color: var(--hx-g);
}

.hx-cities img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

.hx-cities a.on {
  background: var(--hx-g);
  border-color: var(--hx-g);
  color: #fff;
  box-shadow: 0 4px 12px rgba(22,139,61, 0.3);
}

.hx-badges {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 18px;
  border-left: 1px solid var(--hx-line);
}

.hx-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hx-ink);
  white-space: nowrap;
}

.hx-badges i {
  font-size: 18px;
  color: var(--hx-g);
}

/* ==================== 3. Latest in <City> (Full 4-Column Grid) ==================== */
.hx-lsec {
  padding-top: 36px;
}

.hx-latest {
  position: relative;
  width: 100%;
}

.hx-latest.none .hx-lart {
  display: none;
}

/* 4-column balanced card grid spanning 100% of the wrap width */
.hx-lcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.hx-lart {
  display: none;
}

/* Listing card */
.hx-lc {
  position: relative;
  border-radius: 16px;
  background: var(--hx-card);
  border: 1px solid var(--hx-line);
  box-shadow: var(--hx-sh);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.hx-lc:hover {
  transform: translateY(-4px);
  box-shadow: var(--hx-sh-hover);
  border-color: rgba(22,139,61, 0.3);
}

.hx-lcl {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.hx-lph {
  position: relative;
  display: block;
  height: 180px;
  background: #e2e8f0;
  overflow: hidden;
}

.hx-lph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.hx-lc:hover .hx-lph img {
  transform: scale(1.06);
}

.hx-tag {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #FF8500;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.hx-np {
  position: absolute;
  left: 12px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(10, 18, 32, 0.7);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

.hx-hrt {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #64748b;
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.15s ease;
}

.hx-hrt:hover {
  transform: scale(1.1);
  color: #e11d48;
}

.hx-hrt.on {
  color: #e11d48;
}

.hx-lb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 12px;
  flex: 1;
}

.hx-pr {
  font-family: var(--font-head, Poppins, sans-serif);
  font-size: 20px;
  font-weight: 800;
  color: var(--hx-ink);
  letter-spacing: -0.01em;
}

.hx-pr small {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--hx-mu);
}

.hx-lt {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hx-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}

.hx-ll {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--hx-mu);
}

.hx-ll i {
  color: #FF8500;
  font-size: 15px;
}

.hx-chp {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.hx-chp span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--hx-line);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hx-ink);
  background: var(--hx-card);
}

.hx-chp i {
  font-size: 14px;
  color: #7b8798;
}

.hx-lf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--hx-line);
  font-size: 12px;
}

.hx-vf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--hx-g);
  font-weight: 700;
}

.hx-vf i {
  font-size: 15px;
}

.hx-ago {
  color: var(--hx-mu);
}

/* ==================== 4. Popular Areas Guide ==================== */
.hx-areas {
  background: linear-gradient(180deg, rgba(234, 246, 238, 0) 0%, var(--hx-soft) 20%, var(--hx-soft) 80%, rgba(234, 246, 238, 0) 100%);
}

.hx-locs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.hx-locs a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px 0 14px;
  border-radius: 999px;
  background: var(--hx-card);
  border: 1.5px solid var(--hx-line);
  box-shadow: 0 2px 6px rgba(15, 35, 60, 0.04);
  color: var(--hx-ink);
  text-decoration: none;
  min-width: 0;
  transition: all 0.2s ease;
}

.hx-locs a:hover {
  transform: translateY(-1px);
  border-color: var(--hx-g);
  color: var(--hx-g);
  box-shadow: 0 4px 10px rgba(22,139,61, 0.15);
}

.hx-locs i {
  flex: none;
  color: #FF8500;
  font-size: 16px;
}

.hx-locs b {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hx-locs span {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--hx-mu);
  font-size: 11.5px;
  font-weight: 700;
}

.hx-locs a.on {
  background: var(--hx-g);
  border-color: var(--hx-g);
  color: #fff;
}

.hx-locs a.on i {
  color: #fde047;
}

.hx-locs a.on span {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.hx-sky {
  display: none;
}

/* ==================== 5. Browse by Category Bento ==================== */
.hx-cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.hx-cat {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 18px;
  border-radius: 16px;
  overflow: hidden;
  background: #0f172a;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--hx-sh);
  min-height: 140px;
  transition: all 0.25s ease;
}

.hx-cat:hover {
  transform: translateY(-3px);
  box-shadow: var(--hx-sh-hover);
}

.hx-cat.big {
  grid-column: span 2;
  min-height: 180px;
}

.hx-cimg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--img) center/cover no-repeat;
  transition: transform 0.6s ease;
}

.hx-cat:hover .hx-cimg {
  transform: scale(1.05);
}

.hx-cat:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 14, 28, 0.1) 0%, rgba(8, 14, 28, 0.75) 100%);
}

.hx-ci {
  position: absolute;
  top: 14px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--t1), var(--t2));
  color: #fff;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.hx-ct {
  display: flex;
  flex-direction: column;
  padding-right: 40px;
}

.hx-ct b {
  font-family: var(--font-head, Poppins, sans-serif);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.hx-cat.big .hx-ct b {
  font-size: 22px;
}

.hx-ct em {
  font-style: normal;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 3px;
}

.hx-cgo {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  font-size: 16px;
  transition: all 0.2s ease;
}

.hx-cat:hover .hx-cgo {
  background: #fff;
  color: #0f172a;
}

/* ==================== Responsive ==================== */
@media (max-width: 1280px) {
  .hx-lcards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hx-grps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hx-locs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .hx-lcards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hx-grps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hx-locs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hx-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hx-crin {
    flex-direction: column;
    align-items: flex-start;
  }

  .hx-badges {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 600px) {
  .hx-sec {
    padding: 32px 0;
  }

  .hx-lcards {
    grid-template-columns: 1fr;
  }

  .hx-grps {
    grid-template-columns: 1fr;
  }

  .hx-locs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hx-sh {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .hx-sh h2 {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hx-grp,
  .hx-lc,
  .hx-cimg,
  .hx-lph img,
  .hx-chips a,
  .hx-locs a {
    transition: none !important;
  }
}
/* "Explore {City}": one size, one baseline, the orange swoosh sits right under the city name */
.hx-explore h2.hx-exh{display:block;margin:0;font:800 34px/1.15 var(--font-head,Poppins,system-ui,sans-serif);letter-spacing:-.025em;color:var(--hx-ink)}
.hx-exh>span{font:inherit;color:inherit}
.hx-exh .hx-exc{position:relative;display:inline-block;font:inherit;color:var(--hx-g);padding-bottom:6px;white-space:nowrap}
.hx-exh .hx-exc span{font:inherit;color:inherit}
.hx-exh .hx-swoosh{position:absolute;left:4%;right:-2%;bottom:-4px;width:auto;height:12px;margin:0}
@media(max-width:700px){.hx-explore h2.hx-exh{font-size:26px}.hx-exh .hx-swoosh{height:9px;bottom:-3px}}
/* swoosh below the descenders (j, y, g, p), never through the letters */
.hx-exh .hx-exc{padding-bottom:0;line-height:1.15}
.hx-exh .hx-swoosh{left:6%;right:4%;bottom:-.42em;height:.3em}
.hx-explore h2.hx-exh{margin-bottom:.35em}
.hx-exh .hx-swoosh{left:4%;right:auto;width:92%}

/* Browse by category: 3 large (Properties, PG & Hostels, Services) + 4 small on desktop; tablet 2-up with the 3rd large card full width */
@media (min-width: 961px) {
  .hx-cats { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hx-cat { grid-column: span 3; }
  .hx-cat.big { grid-column: span 4; }
}
@media (max-width: 960px) and (min-width: 601px) {
  .hx-cat.big { grid-column: span 1; }
  .hx-cat.big:nth-child(3) { grid-column: 1 / -1; }
}

/* Empty "Live in {City}" box: hidden, projects take the full width (the partial prints only .cs-empty) */
.live:has(> .cs-empty){display:none}
.hduo:has(> .live > .cs-empty){grid-template-columns:1fr}
.hduo:has(> .live > .cs-empty) .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.hduo:has(> .live > .cs-empty) .pgrid>a:nth-child(3){display:block}
@media(max-width:900px){.hduo:has(> .live > .cs-empty) .pgrid{grid-template-columns:1fr}}

/* ===== Phase B (2026-11-14): 10 category cards, product cards, more-on-RentHub360, how it works ===== */
.hx-ct small{display:block;margin-top:3px;font:500 12.5px/1.3 var(--font-body,Inter,sans-serif);color:rgba(255,255,255,.85)}
.hx-cat.big .hx-ct small{font-size:13.5px}
@media (min-width: 961px){ .hx-cat.mid{grid-column:span 4} }
@media (max-width: 960px){ .hx-cat.mid:last-child{grid-column:1/-1} }

.hx-pgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hx-pc{position:relative;display:flex;flex-direction:column;padding:26px 26px 24px;border-radius:20px;background:#fff;border:1px solid var(--hx-line,#e3e8ef);box-shadow:0 14px 34px -24px rgba(16,36,59,.35);overflow:hidden}
.hx-pc:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:#168B3D}
.hx-pc-pg:before{background:#FF8500}
.hx-pci{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:#eaf6ee;color:#168B3D;font-size:27px}
.hx-pc-pg .hx-pci{background:#fff3e6;color:#e07400}
.hx-pc h3{margin:16px 0 6px;font:700 22px/1.2 var(--font-head,Poppins,sans-serif);color:var(--hx-ink)}
.hx-pc>p{margin:0 0 16px;color:#64748B;font-size:14.5px}
.hx-pc ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:0 0 22px;padding:0;list-style:none}
.hx-pc li{display:flex;align-items:flex-start;gap:8px;font:500 14px/1.35 var(--font-body,Inter,sans-serif);color:var(--hx-ink)}
.hx-pc li i{flex:none;color:#168B3D;font-size:18px}
.hx-pc-pg li i{color:#e07400}
.hx-pbtn{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:12px;background:#168B3D;color:#fff!important;font:600 14.5px/1 var(--font-body,Inter,sans-serif);text-decoration:none;transition:background .15s,transform .15s}
.hx-pbtn:hover{background:#0f7132;transform:translateY(-1px)}
.hx-pc-pg .hx-pbtn,.hx-pbtn-o{background:#FF8500}
.hx-pc-pg .hx-pbtn:hover,.hx-pbtn-o:hover{background:#e67600}

.hx-mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hx-mc{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--hx-line,#e3e8ef);text-decoration:none;color:var(--hx-ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.hx-mc:hover{transform:translateY(-2px);border-color:#bfe3cb;box-shadow:0 12px 26px -18px rgba(16,36,59,.4)}
.hx-mc i{grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;font-size:23px;color:var(--c);background:color-mix(in srgb,var(--c) 11%,#fff)}
.hx-mc b{font:600 15.5px/1.25 var(--font-head,Poppins,sans-serif)}
.hx-mc span{font-size:13.5px;color:#64748B;line-height:1.35}

.hx-hgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hx-hcol{padding:24px 26px;border-radius:20px;background:#F5F8FA;border:1px solid var(--hx-line,#e3e8ef);display:flex;flex-direction:column}
.hx-hcol h3{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:700 19px/1.2 var(--font-head,Poppins,sans-serif);color:var(--hx-ink)}
.hx-hcol h3 i{color:#168B3D;font-size:22px}
.hx-hown h3 i{color:#e07400}
.hx-hcol ol{margin:0 0 18px;padding:0;list-style:none;counter-reset:st;display:grid;gap:14px}
.hx-hcol li{counter-increment:st;display:grid;grid-template-columns:34px 1fr;column-gap:12px}
.hx-hcol li:before{content:counter(st);grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#168B3D;color:#fff;font:700 15px/1 var(--font-head,Poppins,sans-serif)}
.hx-hown li:before{background:#FF8500}
.hx-hcol li b{font:600 15.5px/1.3 var(--font-head,Poppins,sans-serif);color:var(--hx-ink)}
.hx-hcol li span{font-size:14px;color:#64748B;line-height:1.4}

html[data-theme="dark"] .hx-pc,html[data-theme="dark"] .hx-mc{background:#111c2e;border-color:#26344b}
html[data-theme="dark"] .hx-hcol{background:#0f1a2c;border-color:#26344b}
html[data-theme="dark"] .hx-pc>p,html[data-theme="dark"] .hx-mc span,html[data-theme="dark"] .hx-hcol li span{color:#a3b1c4}
html[data-theme="dark"] .hx-pci{background:rgba(22,139,61,.18)}
html[data-theme="dark"] .hx-pc-pg .hx-pci{background:rgba(255,133,0,.16)}
html[data-theme="dark"] .hx-mc i{background:rgba(255,255,255,.06)}

@media (max-width: 960px){ .hx-pgrid,.hx-hgrid{grid-template-columns:1fr} .hx-mgrid{grid-template-columns:1fr 1fr} }
@media (max-width: 600px){ .hx-pc{padding:22px 18px} .hx-pc ul{grid-template-columns:1fr} .hx-mgrid{grid-template-columns:1fr} .hx-hcol{padding:20px 18px} .hx-pbtn{width:100%;justify-content:center} }
@media (prefers-reduced-motion: reduce){ .hx-mc,.hx-pbtn{transition:none} .hx-mc:hover,.hx-pbtn:hover{transform:none} }

/* Explore band tidy-up (2026-11-14): real counts on the group cards, a label on the city row, calmer chips */
.hx-gt em{font-style:normal}
.hx-gt em.has{display:inline-flex;align-items:center;gap:5px;margin-top:3px;color:#168B3D;font-weight:600}
.hx-gt em.has:before{content:"";width:6px;height:6px;border-radius:50%;background:#168B3D}
.hx-crin{display:flex;align-items:center;gap:14px;flex-direction:row}
.hx-crl{flex:none;display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--font-head,Poppins,sans-serif);letter-spacing:.04em;text-transform:uppercase;color:#64748B}
.hx-crl i{font-size:17px;color:#168B3D}
.hx-cities{flex:1 1 auto;min-width:0}
.hx-chips a{max-width:240px}
.hx-chips a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){ .hx-crin{flex-direction:column;align-items:flex-start;gap:8px} .hx-cities{width:100%} }