/* Belief statement under the hero. Typography follows the other section titles
   (see .medusa-impact); the buttons reuse the hero's .medusa-hero__cta. */
.medusa-belief { display: grid; place-items: center; padding: clamp(80px, 9vw, 140px) 3.2rem; text-align: center; color: #e0e5ef; }
.medusa-belief__content { max-width: 1100px; }
.medusa-belief h2 { margin: 0 0 24px; font: 400 clamp(34px, 3.7vw, 64px)/1.03 var(--_font-default); letter-spacing: -.04em; color: #e0e5ef; }
.medusa-belief p { max-width: 560px; margin: 0 auto; font: 300 clamp(14px, 1.05vw, 17px)/1.4 var(--_font-default); letter-spacing: -.015em; color: #afb9cc; }
/* What the client gets, as quiet glass tags above the single call to action. */
.medusa-belief__benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.medusa-belief__benefits li { padding: 8px 16px; border: 1px solid #e0e5ef24; border-radius: 20px; background: linear-gradient(145deg, #222c4a59, #0c122240); box-shadow: inset 1px 1px 0 #ffffff12; font: 400 11px/1.2 "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: #c9d2e2; }
.medusa-belief .medusa-hero__actions { justify-content: center; padding-top: 3.2rem; }
@media (max-width: 767px) {
  .medusa-belief { padding-inline: 2.2rem; }
}