/* ===============================================================
   TRUST CENTER
   This file is linked from base.html on every single page
   (<link ... href="{% static 'css/trust.css' %}">) but did not
   exist anywhere in the project - a silent 404 on every page load,
   site-wide. Creating it fixes that, and gives the Trust Center's
   hero banners a real, mobile-responsive treatment instead of the
   inline styles they were using before (hardcoded font-size with
   no mobile scale-down, and CTA buttons with no flex-wrap that
   could overflow on narrow screens).
=================================================================== */

.trust-hero {
  color: #fff;
  border: none;
  text-align: center;
  margin-bottom: 30px;
  padding: 42px 24px;
}

.trust-hero-icon {
  font-size: clamp(42px, 10vw, 70px);
  line-height: 1;
  margin-bottom: 10px;
}

.trust-hero h1 {
  margin: 0 0 15px;
  /* was hardcoded 2.4rem with no mobile fallback - wrapped across
     several lines and dominated small screens. clamp() keeps it
     readable small, impactful large. */
  font-size: clamp(1.5rem, 5.5vw, 2.4rem);
  line-height: 1.2;
}

.trust-hero p {
  max-width: 850px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.8;
  opacity: 0.95;
}

.trust-hero-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .trust-hero {
    padding: 32px 18px;
  }

  .trust-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .trust-hero-actions .btn-primary {
    width: 100%;
    text-align: center;
  }
}