/* ═══ Landing counters: the same white tile as the event date badge ═══
   A big dark number on a white tile with the soft fold line, and a short
   red word under it (like "20 / Dec" on event cards). No coloured icons.
   Overrides eventme-africa.css and visuals.css (both use !important). */
.hero .hero-stats:not(.is-empty) {
  display: flex !important; grid-template-columns: none !important; grid-auto-flow: row !important;
  gap: 16px !important; justify-content: center !important; align-items: stretch !important; flex-wrap: wrap !important;
  width: auto !important; min-width: 0 !important; max-width: calc(100vw - 32px) !important;
  margin: 20px auto 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.hero .hero-stats .stat-item {
  container-type: normal !important; flex: none !important; position: relative !important; overflow: hidden !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important;
  --fold: calc(8px + 1.8rem + 3px);   /* the fold sits just under the number, never through it */
  width: auto !important; min-width: 136px !important; max-width: none !important; margin: 0 !important; padding: 8px 22px 7px !important;
  border: 0 !important; border-radius: 10px !important;
  background: linear-gradient(180deg, #ffffff 0, #f3f3f3 var(--fold), #e8e8e8 calc(var(--fold) + 1px), #f4f4f4 100%) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.4) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.hero .hero-stats .stat-item[style*="display: none"], .hero .hero-stats .stat-item[style*="display:none"] { display: none !important; }
/* the fold line across the middle of the tile */
.hero .hero-stats .stat-item::before { display: none !important; }
.hero .hero-stats .stat-item::after {
  content: "" !important; display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; top: var(--fold) !important; height: 1px !important;
  background: rgba(0,0,0,.10) !important; box-shadow: 0 1px 0 rgba(255,255,255,.8) !important; pointer-events: none;
}
.hero .hero-stats .stat-ic { display: none !important; }
.hero .hero-stats .stat-txt { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; }
.hero .hero-stats .stat-num {
  display: block !important; min-width: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important;
  background: none !important; box-shadow: none !important; border: 0 !important; text-shadow: none !important;
  font-family: var(--font-display, inherit) !important; font-size: 1.8rem !important; font-weight: 700 !important; line-height: 1 !important;
  letter-spacing: -.02em !important; color: #1a1a1a !important; font-variant-numeric: tabular-nums;
}
.hero .hero-stats .stat-num::after { display: none !important; }
.hero .hero-stats .stat-label {
  margin: 4px 0 0 !important; font-family: inherit !important; font-size: .72rem !important; font-weight: 700 !important;
  letter-spacing: .02em !important; text-transform: none !important; text-align: center !important; white-space: nowrap !important;
  color: #C8102E !important; text-shadow: none !important;
}
@media (max-width: 640px) {
  .hero .hero-stats:not(.is-empty) { gap: 8px !important; flex-wrap: nowrap !important; }
  .hero .hero-stats .stat-item { --fold: calc(7px + 1.4rem + 3px); min-width: 0 !important; flex: 1 1 0 !important; padding: 7px 6px 6px !important; border-radius: 9px !important; }
  .hero .hero-stats .stat-num { font-size: 1.4rem !important; }
  .hero .hero-stats .stat-label { font-size: .64rem !important; margin-top: 3px !important; }
}