main { 
  max-width: var(--content); 
  margin: 0 auto; 
  padding: 24px 16px 64px; 
}

.intro {
  background: #fbfbfb;
  border: 1px solid #e6ebf0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  max-width: 980px;
  margin: 0 auto 24px;
}
.intro p { margin: 0 0 1rem; text-align: justify; }

.hero-highlights {
  display: flex;
  justify-content: center;
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto 32px;
  align-items: stretch;
}

.hero {
  width: 480px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid #e6ebf0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.hero img { display: block; width: 100%; height: auto; }
.hero .cap { 
  padding: 10px 14px; 
  font-size: .95rem; 
  color: #495a6a; 
  text-align: center; 
  background: #e6eff7; 
  border-top: 1px solid #d0d9e2; 
}

.highlights { 
  display: flex; 
  flex-direction: column; 
  gap: 14px; 
  max-width: 640px;
  justify-content: space-between; 
}

.hl {
  background: #f7fbff;
  border: 1px solid #e6ebf0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex: 1;

  transition: border-color .2s ease, box-shadow .2s ease;
}
.hl:hover { 
  border-color: #0b63ce; 
  box-shadow: 0 2px 10px rgba(0,0,0,.06); 
}

.hl .ico { 
  width: 22px; 
  height: 22px; 
  flex: 0 0 22px; 
  color: #0b63ce; 
  margin-top: 2px; 
}
.hl h3 { margin: 0 0 6px; color: #07345c; font-size: 1.05rem; }
.hl p  { margin: 0; color: #495a6a; }

@media (max-width: 900px) {
  .hero-highlights { 
    flex-direction: column; 
    align-items: center; 
  }
  .hero { width: 100%; max-width: 460px; }
  .highlights { width: 100%; max-width: 980px; justify-content: initial; }
  .hl { flex: unset; }
}