@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

#hwl-info#hwl-info {
  --hwl-ink: #172033 !important;
  --hwl-body: #5f6b7a !important;
  --hwl-line: rgba(41, 112, 255, 0.16) !important;
  --hwl-bg: #f5f8ff !important;
  --hwl-card: #ffffff !important;
  --hwl-blue: #2970ff !important;
  --hwl-teal: #11a6a0 !important;
  --hwl-gold: #f2a900 !important;
  font-family: Inter, Arial, sans-serif !important;
  color: var(--hwl-ink) !important;
  width: 100% !important;
  max-width: 100% !important;
}

#hwl-info#hwl-info * {
  box-sizing: border-box !important;
}

#hwl-info#hwl-info .hwl-sec {
  padding: 64px 20px !important;
}

#hwl-info#hwl-info .hwl-hero {
  padding-top: 36px !important;
  background: linear-gradient(135deg, rgba(41, 112, 255, 0.08), rgba(17, 166, 160, 0.07)) !important;
}

#hwl-info#hwl-info .hwl-band {
  background: var(--hwl-bg) !important;
}

#hwl-info#hwl-info .hwl-inner {
  max-width: 1120px !important;
  margin: 0 auto !important;
}

#hwl-info#hwl-info .hwl-kicker {
  margin: 0 0 10px !important;
  color: var(--hwl-teal) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#hwl-info#hwl-info h1,
#hwl-info#hwl-info h2,
#hwl-info#hwl-info h3,
#hwl-info#hwl-info p {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#hwl-info#hwl-info h1 {
  max-width: 820px !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  font-size: clamp(2rem, 4vw, 4rem) !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(135deg, var(--hwl-blue), var(--hwl-teal)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

#hwl-info#hwl-info h2 {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  font-size: clamp(1.35rem, 2vw, 2rem) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--hwl-ink) !important;
}

#hwl-info#hwl-info h3 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  font-size: 1rem !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
  color: var(--hwl-ink) !important;
}

#hwl-info#hwl-info p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: var(--hwl-body) !important;
  font-size: 0.98rem !important;
  line-height: 1.75 !important;
}

#hwl-info#hwl-info .hwl-lede {
  max-width: 720px !important;
  font-size: 1.08rem !important;
}

#hwl-info#hwl-info .hwl-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

#hwl-info#hwl-info .hwl-card,
#hwl-info#hwl-info .hwl-list article,
#hwl-info#hwl-info .hwl-faq article {
  background: var(--hwl-card) !important;
  border: 1px solid var(--hwl-line) !important;
  border-radius: 14px !important;
  padding: 28px !important;
  box-shadow: 0 10px 30px rgba(23, 32, 51, 0.05) !important;
}

#hwl-info#hwl-info .hwl-list,
#hwl-info#hwl-info .hwl-faq {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 24px !important;
}

@media (max-width: 820px) {
  #hwl-info#hwl-info .hwl-sec {
    padding: 42px 16px !important;
  }

  #hwl-info#hwl-info .hwl-grid,
  #hwl-info#hwl-info .hwl-list,
  #hwl-info#hwl-info .hwl-faq {
    grid-template-columns: 1fr !important;
  }

  #hwl-info#hwl-info .hwl-card,
  #hwl-info#hwl-info .hwl-list article,
  #hwl-info#hwl-info .hwl-faq article {
    padding: 22px !important;
  }
}