/* ============================================================================
 * homepage-hero-layout-fix-v2.css — BeeCore Homepage Hero LEFT column
 * ----------------------------------------------------------------------------
 * ADDITIVE ONLY — never touches React bundle or other sections.
 * All rules scoped under section.hero .hero-left.
 *
 * v2 tweaks: tag width, desc exact line breaks, gap between descs,
 * benefits 2x2 grid, Your Way color restore, 4th benefit.
 * ========================================================================== */

/* ---- 1. Flex container + unified max-width ---- */
section.hero .hero-left {
  display: flex !important;
  flex-direction: column !important;
  max-width: 520px !important;
  padding: 12px 0 40px !important;
}

/* ---- 2. DOM order swap via CSS `order` ---- */
section.hero .hero-tag         { order: 1 !important; }
section.hero .hero-title       { order: 2 !important; }
section.hero .hero-desc        { order: 3 !important; }
section.hero .hero-bottom-note { order: 4 !important; }   /* moved UP */
section.hero .hero-btns        { order: 5 !important; }   /* moved DOWN */
section.hero .hero-points      { order: 6 !important; }

/* ---- 3. Badge — content-width (no stretch), BeeCore yellow ---- */
section.hero .hero-tag {
  width: fit-content !important;
  max-width: 100% !important;
  align-self: flex-start !important;
  background: #FFF8E5 !important;
  border: 1px solid #F5D98A !important;
  color: #B77900 !important;
  box-shadow: none !important;
  margin-bottom: 22px !important;
  white-space: nowrap !important;
}

/* ---- 4. H1 spacing + YOUR WAY restored to --bee = #F5B800 ---- */
section.hero .hero-title {
  margin-bottom: 18px !important;
}
section.hero .hero-title-grad {
  color: #F5B800 !important;   /* historical var(--bee), RESTORE */
  -webkit-text-fill-color: #F5B800 !important;
}

/* ---- 5. Primary description: exact max-width → 2 lines at 1920 ---- */
section.hero .hero-desc {
  max-width: 480px !important;
  margin-bottom: 4px !important;
  font-size: 16px !important;
  color: #334155 !important;
  line-height: 1.6 !important;
}

/* ---- 6. Secondary description: smaller gap to primary, 2 lines ---- */
section.hero .hero-bottom-note {
  display: block !important;
  max-width: 480px !important;
  margin-bottom: 24px !important;
  margin-top: 0 !important;
  font-size: 15px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
}

/* ---- 7. CTA buttons ---- */
section.hero .hero-btns {
  gap: 12px !important;
  margin-bottom: 28px !important;
}

/* ---- 8. Benefits: CSS grid 2 × 2 ---- */
section.hero .hero-points {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 10px 32px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
section.hero .hero-point {
  display: flex !important;
  align-items: center !important;
  font-size: 14px !important;
  color: #475569 !important;
  gap: 8px !important;
  white-space: nowrap !important;
}
section.hero .hero-point-check {
  background: #FFF4CC !important;
  color: #F5B800 !important;
  padding: 2px !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* ---- 9. Responsive ---- */
@media (max-width: 900px) {
  section.hero .hero-left {
    max-width: none !important;
  }
  section.hero .hero-tag {
    white-space: normal !important;
  }
  section.hero .hero-points {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}
@media (max-width: 1440px) {
  section.hero .hero-inner {
    grid-template-columns: 500px 1fr !important;
    gap: 60px !important;
  }
}
@media (min-width: 1441px) {
  section.hero .hero-inner {
    grid-template-columns: 520px 1fr !important;
    gap: 80px !important;
  }
}

/* Provider Strip spacing — extra breathing room below Hero */
section.hero {
  margin-bottom: 16px !important;
}