/* ============================================================
   ER Platform Capabilities — module.css
   All rules use !important to override HubSpot theme defaults
   ============================================================ */

/* ── Section wrapper ── */
.er-platform {
  padding: 80px 0 !important;
  background: #ffffff !important;
}
.er-platform__container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* ── Section header ── */
.er-platform__header {
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto 48px !important;
}
.er-platform__eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #6E31FF !important;
  font-family: 'Inter', sans-serif !important;
  margin-bottom: 12px !important;
}
.er-platform__heading {
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 800 !important;
  color: #1E0A4D !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.15 !important;
  margin-bottom: 16px !important;
}
.er-platform__subheading {
  font-size: 17px !important;
  color: #6B7280 !important;
  font-family: 'Roboto', sans-serif !important;
  line-height: 1.6 !important;
}

/* ── Tab navigation ── */
.er-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 80px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Reset ALL button styles from HubSpot theme */
.er-tab,
.er-tab:link,
.er-tab:visited,
.er-tab:hover,
.er-tab:focus,
.er-tab:active {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  /* Default (inactive) state */
  background: transparent !important;
  color: #6B7280 !important;
  border: 1.5px solid transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Active tab */
.er-tab--active,
.er-tab--active:hover,
.er-tab--active:focus {
  background: transparent !important;
  color: #6E31FF !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 2px 12px rgba(110,49,255,0.25) !important;
}

/* ── Panels ── */
.er-panels {
  width: 100% !important;
}

/* Remove ALL box styling from panels */
.er-panel,
.er-panel--active {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.er-panel { display: none !important; }
.er-panel--active { display: block !important; }

/* Panel inner layout */
.er-panel__content {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: start !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Left: text side ── */
.er-panel__text {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Pill badge above heading */
.er-panel__badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  border-radius: 100px !important;
  margin-bottom: 16px !important;
  width: fit-content !important;
  font-family: 'Inter', sans-serif !important;
}
.er-panel__badge--purple { background: #EFF6FF !important; color: #1477F8 !important; border: 1px solid rgba(20,119,248,0.2) !important; }
.er-panel__badge--blue   { background: #EFF6FF !important; color: #1477F8 !important; border: 1px solid rgba(20,119,248,0.2) !important; }
.er-panel__badge--green  { background: #EFF6FF !important; color: #1477F8 !important; border: 1px solid rgba(20,119,248,0.2) !important; }

.er-panel__heading {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #1E0A4D !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.3 !important;
  margin: 0 0 14px !important;
}
.er-panel__description {
  font-size: 15px !important;
  color: #6B7280 !important;
  font-family: 'Roboto', sans-serif !important;
  line-height: 1.65 !important;
  margin: 0 0 20px !important;
}

/* ── Bullet list — tick circles, NO default dots ── */
.er-panel__features {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  padding-left: 0 !important;
  margin: 0 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.er-panel__features li {
  list-style: none !important;
  list-style-type: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 14px !important;
  color: #374151 !important;
  line-height: 1.5 !important;
  font-family: 'Roboto', sans-serif !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
/* Kill any ::before pseudo-element bullets from theme */
.er-panel__features li::before,
.er-panel__features li::after {
  content: none !important;
  display: none !important;
}

.er-tick {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  display: inline-block !important;
}

/* CTA area */
.er-panel__cta-area {
  margin-top: 4px !important;
}

/* ── Right: visual side ── */
.er-panel__visual {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
.er-panel__visual img {
  width: 100% !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.10) !important;
  display: block !important;
}
.er-panel__visual-placeholder {
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  border-radius: 16px !important;
  border: 1.5px dashed #D1D5DB !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  background: #F9FAFB !important;
}
.er-panel__visual-placeholder svg {
  width: 48px !important;
  height: 48px !important;
}
.er-panel__visual-placeholder p {
  font-size: 13px !important;
  color: #9CA3AF !important;
  font-family: 'Roboto', sans-serif !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ── Stat card — 2-column split ── */
.er-panel__stat {
  border-radius: 16px !important;
  padding: 28px 32px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.er-panel--purple .er-panel__stat { background: #EFF6FF !important; border: 1px solid rgba(20,119,248,0.12) !important; }
.er-panel--blue   .er-panel__stat { background: #EFF6FF !important; border: 1px solid rgba(20,119,248,0.12) !important; }
.er-panel--green  .er-panel__stat { background: #EFF6FF !important; border: 1px solid rgba(20,119,248,0.12) !important; }

.er-panel__stat-cell {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.er-panel__stat-cell:first-child {
  padding-right: 24px !important;
  border-right: 1px solid rgba(20,119,248,0.15) !important;
}
.er-panel__stat-cell:last-child {
  padding-left: 24px !important;
}

.er-panel__stat-value {
  font-size: 48px !important;
  font-weight: 800 !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
.er-panel__stat-value--purple { color: #1477F8 !important; }
.er-panel__stat-value--blue   { color: #1477F8 !important; }
.er-panel__stat-value--green  { color: #1477F8 !important; }

.er-panel__stat-label {
  font-size: 15px !important;
  color: #6B7280 !important;
  font-family: 'Roboto', sans-serif !important;
  line-height: 1.4 !important;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .er-platform { padding: 56px 0 !important; }
  .er-tabs { flex-direction: column !important; align-items: center !important; }
  .er-panel__content { grid-template-columns: 1fr !important; gap: 32px !important; }
  .er-panel__stat { padding: 20px 20px !important; }
  .er-panel__stat-cell:first-child { padding-right: 16px !important; }
  .er-panel__stat-cell:last-child  { padding-left: 16px !important; }
  .er-panel__stat-value { font-size: 36px !important; }