/* BeeCore Homepage Section 7 — GET STARTED (Final CTA).
   Scoped to #root > .page > .bc-section-seven. All classes prefixed .bc7-*.
   Typography-first CTA: badge, heading with yellow accent, two-line description,
   primary + secondary buttons, then one restrained billing line and a small
   tertiary pricing text link. No cards, no icons, no fake data.

   V2-D: removed the three filler value columns, the "ONE PLATFORM. MORE
   POSSIBILITIES." ending line, and the old .bc7-note. The Developer Experience
   section directly above now carries the technical proof, and "scales with you"
   was an unverified commercial claim. Their CSS rules are deleted rather than
   left orphaned. No pricing numbers or plan tiers anywhere. */

#root > .page > .bc-section-seven *,
#root > .page > .bc-section-seven *::before,
#root > .page > .bc-section-seven *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#root > .page > .bc-section-seven {
  position: relative;
  width: 100%;
  padding: 72px 0 56px 0;
  background: #FFFFFF;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #0F172A;
}

#root > .page > .bc-section-seven .bc7-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

/* ──────────────────────────────────────────────
   BADGE
   ────────────────────────────────────────────── */
/* BADGE — HERO BADGE GOLD STANDARD (centered by parent bc7-container text-align:center) */
#root > .page > .bc-section-seven .bc7-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: normal;
  color: rgb(180, 83, 9);
  background: rgb(255, 248, 225);
  border: 0.67px solid rgb(245, 230, 184);
  box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 2px;
  margin-bottom: 24px;
  white-space: nowrap;
}
#root > .page > .bc-section-seven .bc7-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f5b800;
}

/* ──────────────────────────────────────────────
   HEADLINE — UNIFIED S2-S7 TOKEN
   ────────────────────────────────────────────── */
#root > .page > .bc-section-seven .bc7-headline {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(28px, 2.4vw, 44px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #0F172A;
  margin-bottom: 24px;
}

/* Yellow accent — inline, same size as H2 parent */
#root > .page > .bc-section-seven .bc7-accent {
  color: #F5B800;
}

/* ──────────────────────────────────────────────
   DESCRIPTION (2 forced lines on desktop)
   ────────────────────────────────────────────── */
#root > .page > .bc-section-seven .bc7-desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #6B7280;
  margin-bottom: 36px;
}

#root > .page > .bc-section-seven .bc7-desc > .bc7-line {
  display: block;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────
   CTA BUTTONS
   ────────────────────────────────────────────── */
#root > .page > .bc-section-seven .bc7-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

#root > .page > .bc-section-seven .bc7-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.18s ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

#root > .page > .bc-section-seven .bc7-btn-primary {
  background: #F5B800;
  color: #0F172A;
  border-color: #F5B800;
}

#root > .page > .bc-section-seven .bc7-btn-primary:hover {
  background: #E0A700;
  border-color: #E0A700;
}

#root > .page > .bc-section-seven .bc7-arrow {
  margin-left: 6px;
  font-size: 14px;
  line-height: 1;
}

#root > .page > .bc-section-seven .bc7-btn-secondary {
  background: #FFFFFF;
  color: #0F172A;
  border-color: #E5E7EB;
}

#root > .page > .bc-section-seven .bc7-btn-secondary:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

/* ──────────────────────────────────────────────
   BILLING LINE + TERTIARY PRICING LINK (V2-D)
   One restrained orientation line plus a small text
   link. Deliberately not a third large button.
   ────────────────────────────────────────────── */
#root > .page > .bc-section-seven .bc7-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#root > .page > .bc-section-seven .bc7-billing {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #9CA3AF;
}

#root > .page > .bc-section-seven .bc7-pricing-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #6B7280;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
#root > .page > .bc-section-seven .bc7-pricing-link:hover {
  color: #0F172A;
  border-bottom-color: #E5E7EB;
}
#root > .page > .bc-section-seven .bc7-pricing-link .bc7-arrow {
  margin-left: 0;
  font-size: 12px;
}

/* ──────────────────────────────────────────────
   TABLET — max-width 1024px
   ────────────────────────────────────────────── */
@media (max-width: 1024px) {

  #root > .page > .bc-section-seven {
    padding: 64px 0 48px 0;
  }

  #root > .page > .bc-section-seven .bc7-container {
    padding: 0 32px;
  }

  #root > .page > .bc-section-seven .bc7-headline {
    font-size: 37px;
  }

  #root > .page > .bc-section-seven .bc7-desc {
    font-size: 17px;
    margin-bottom: 32px;
  }

  /* Allow description to wrap naturally on tablet */
  #root > .page > .bc-section-seven .bc7-desc > .bc7-line {
    white-space: normal;
  }

  #root > .page > .bc-section-seven .bc7-btn {
    font-size: 14px;
    padding: 11px 20px;
  }
}

/* ──────────────────────────────────────────────
   MOBILE — max-width 640px
   ────────────────────────────────────────────── */
@media (max-width: 640px) {

  #root > .page > .bc-section-seven {
    padding: 56px 0 40px 0;
  }

  #root > .page > .bc-section-seven .bc7-container {
    padding: 0 20px;
  }

  /* Badge uses hero gold standard base rule — no mobile override needed */

  #root > .page > .bc-section-seven .bc7-headline {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
  }

  #root > .page > .bc-section-seven .bc7-desc {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 28px;
  }

  #root > .page > .bc-section-seven .bc7-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-bottom: 14px;
  }

  #root > .page > .bc-section-seven .bc7-btn {
    width: 100%;
    font-size: 15px;
    padding: 13px 20px;
  }

  #root > .page > .bc-section-seven .bc7-billing {
    font-size: 12.5px;
  }

  #root > .page > .bc-section-seven .bc7-pricing-link {
    font-size: 12.5px;
  }
}

/* ──────────────────────────────────────────────
   TINY — max-width 380px (ALIGNED TO SECTION 6)
   ────────────────────────────────────────────── */
@media (max-width: 380px) {
  #root > .page > .bc-section-seven .bc7-headline {
    font-size: 24px;
  }
}