/* ─────────────────────────────────────────────────────────
   Hero section-label standardization — industry-ai-startups spec
   Applies all viewports. Excludes industry pages (ais/bbs/ec/edt/
   ft/ht/hrt/lg/lgt/ind) and light-bg heroes (startup/sol/agency).
   ───────────────────────────────────────────────────────── */
section[class*="-hero"]:not(.startup-hero):not(.sol-hero):not(.agency-hero):not(.ais-hero):not(.bbs-hero):not(.ec-hero):not(.edt-hero):not(.ft-hero):not(.ht-hero):not(.hrt-hero):not(.lg-hero):not(.lgt-hero):not(.ind-hero) .section-label{
  display: flex !important;
  width: fit-content !important;
  align-items: center !important;
  gap: 0.625rem !important;
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--teal-bright) !important;
  background: rgba(60,234,199,0.1) !important;
  border: 1px solid rgba(60,234,199,0.2) !important;
  border-radius: 100px !important;
  padding: 5px 14px !important;
  margin: 0 0 1.5rem !important;
}

/* Heading directly after standardized hero label — match AIS h1 margin-top */
section[class*="-hero"]:not(.startup-hero):not(.sol-hero):not(.agency-hero):not(.ais-hero):not(.bbs-hero):not(.ec-hero):not(.edt-hero):not(.ft-hero):not(.ht-hero):not(.hrt-hero):not(.lg-hero):not(.lgt-hero):not(.ind-hero) .section-label + h1,
section[class*="-hero"]:not(.startup-hero):not(.sol-hero):not(.agency-hero):not(.ais-hero):not(.bbs-hero):not(.ec-hero):not(.edt-hero):not(.ft-hero):not(.ht-hero):not(.hrt-hero):not(.lg-hero):not(.lgt-hero):not(.ind-hero) h1{
  margin-top: 0.85rem !important;
}

/* Mobile hero — uniform 1rem/1rem, start directly below fixed nav, no overlap, no gap */
@media (max-width: 768px){
  body{
    padding-top: var(--nav-h, 72px) !important;
  }
  /* Hide breadcrumb strips that sit ABOVE hero on mobile */
  .vs-breadcrumb,
  .page-breadcrumb{
    display: none !important;
  }
  section[class*="-hero"],
  section.hero{
    min-height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  section[class*="-hero"] > .container,
  section.hero > .container,
  /* Pages that wrap hero with non-.container inners */
  section.arc-hero > .arc-inner,
  section.mob-hero > .mob-inner,
  section.mvp-hero > .mvp-inner,
  section.ux-hero > .ux-inner,
  section.saas-hero > .saas-hero-inner,
  section.hero > .hero-grid,
  section.startup-hero > .hero-grid{
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
