/* Phone home top for b2b.cvmarket.ng (<= 860px): Play-Store-style chip row + swipe hero.
   Both come from Supabase (hero_chips / hero_banners, audience b2b) via hero-banners.js;
   what is written into index.html is the fallback and what search engines see first. */
.hb, .hc { display: none; }
@media (max-width: 860px) {
  .hc { display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px; background: #fff; border-bottom: 1px solid #E3E7F0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hc::-webkit-scrollbar { display: none; }
  .hc-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 12px; border-radius: 19px; background: #EDF0F8; color: #0F1B2D; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
  .hc-ico { width: 18px; height: 18px; flex: none; color: #0B5FFF; }
  .hc-chip { background:linear-gradient(135deg,#2F8CFF,#0B5FFF); color:#fff; box-shadow:0 3px 8px rgba(11,95,255,.25); }
  .hc-chip[href*="games"] { background:linear-gradient(135deg,#8B5CF6,#4C1D95); box-shadow:0 3px 8px #4C1D9555; }
  .hc-chip[href*="riders"] { background:linear-gradient(135deg,#FF9A1F,#E5480A); box-shadow:0 3px 8px #E5480A55; }
  .hc-chip[href*="gigs"] { background:linear-gradient(135deg,#14B8B8,#0B6E6E); box-shadow:0 3px 8px #0B6E6E55; }
  .hc-chip[href*="jobs"] { background:linear-gradient(135deg,#F0408F,#A3115A); box-shadow:0 3px 8px #A3115A55; }
  .hc-chip[href*="leaders"] { background:linear-gradient(135deg,#F5B301,#B26A00); box-shadow:0 3px 8px #B26A0055; }
  .hc-chip[href*="members"] { background:linear-gradient(135deg,#12C48B,#00674A); box-shadow:0 3px 8px #00674A55; }
  .hc-chip[href*="business-tools"] { background:linear-gradient(135deg,#2F4BD0,#0F1B4D); box-shadow:0 3px 8px #0F1B4D55; }
  .hc-chip[href*="news"] { background:linear-gradient(135deg,#F43F5E,#9F1239); box-shadow:0 3px 8px #9F123955; }
  .hc-chip[href$="/community"],   .hc-chip[href*="community-market"] { background:linear-gradient(135deg,#2F8CFF,#0B5FFF); }
  .hc-chip .hc-ico { color:#fff; }
  .hc-badge { font-style: normal; font-size: 10px; font-weight: 800; line-height: 1; background: #FFD21F; color: #4a3300; border-radius: 8px; padding: 3px 6px; }
  .hb { display: block; margin: 12px 0 0; position: relative; min-width: 0; }
  .hb-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 12px; scroll-padding-left: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .hb-track::-webkit-scrollbar { display: none; }
  .hb-track::after { content: ''; flex: 0 0 2px; }
  .hb-card { flex: 0 0 84%; max-width: 420px; height: 150px; scroll-snap-align: start; position: relative; overflow: hidden; box-sizing: border-box; border-radius: 18px; padding: 16px; display: block; color: #fff; text-decoration: none;
    background: radial-gradient(120% 130% at 100% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), linear-gradient(135deg, var(--hb-from, #2D5BFF), var(--hb-to, #0B2BD6)); }
  .hb-card.img::before { content: ''; position: absolute; inset: 0; background: var(--hb-img) center/cover; opacity: .26; }
  .hb-card::after { content: ''; position: absolute; right: -34px; bottom: -46px; width: 150px; height: 150px; border-radius: 50%; border: 24px solid rgba(255,255,255,.10); pointer-events: none; }
  .hb-art { position: absolute; right: 12px; bottom: 12px; width: 86px; height: 86px; color: rgba(255,255,255,.32); z-index: 0; }
  .hb-pic { position: absolute; right: 2px; bottom: 4px; width: 150px; height: auto; pointer-events: none; z-index: 0; }
  .hb-card.pic .hb-copy { max-width: 58%; }
  .hb-art svg { width: 100%; height: 100%; stroke-width: 1.5; }
  .hb-copy { position: relative; z-index: 1; display: block; max-width: 86%; }
  .hb-eyebrow { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: #FFD21F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hb-h { margin: 6px 0 0; font-size: 1.12rem; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hb-sub { margin: 5px 0 0; font-size: .76rem; line-height: 1.38; color: rgba(255,255,255,.92); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hb-card:has(.hb-btn) .hb-h { -webkit-line-clamp: 2; }
  .hb-card:has(.hb-btn) .hb-sub { -webkit-line-clamp: 1; }
  .hb-btn { position: absolute; left: 16px; bottom: 14px; z-index: 1; padding: 7px 14px; border-radius: 999px; background: #fff; color: #0B5FFF; font-size: .74rem; font-weight: 800; }
  .hb-dots { display: flex; justify-content: center; gap: 6px; margin-top: 9px; }
  .hb-dots i { width: 6px; height: 6px; border-radius: 3px; background: #CBD2E1; transition: width .2s, background .2s; cursor: pointer; }
  .hb-dots i.on { width: 18px; background: #F5A623; }
}