/* trust.css — loaded after site.css and home.css.
   Styles only the new first-screen .home .hero-trust card.
   Palette comes from the site variables (--accent-dark surface, --paper ink):
   no new colors, no fixed positioning, nothing outside .home, no old .hero-steps. */

.home .hero-trust {
  align-self: center;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  max-width: 26rem;
  margin-inline-start: auto;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: 16px;
  background: var(--accent-dark);
  color: var(--paper);
}

/* Modest portrait: beats the generic 160px .home .portrait on specificity. */
.home .hero-trust .portrait {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper);
}

.home .trust-title {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .01em;
  text-wrap: balance;
}

.home .trust-body {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.8;
}

.home .trust-qualifications {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--paper);
  list-style: none;
  font-size: .875rem;
  letter-spacing: .04em;
}

.home .trust-qualifications li {
  display: flex;
  gap: .5rem;
}

.home .trust-qualifications li::before {
  content: "\2713";
  font-weight: 700;
}

/* Light link on the dark card: same specificity as .home .text-link, wins on load order. */
.home .trust-link {
  align-self: flex-start;
  color: var(--paper);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration-color: var(--paper);
  text-underline-offset: .3em;
  overflow-wrap: anywhere;
}

.home .trust-link:hover,
.home .trust-link:focus-visible {
  text-decoration-thickness: 2px;
}

@media (max-width: 768px) {
  /* .home .hero collapses to one column: the card goes full width, left-aligned. */
  .home .hero-trust {
    max-width: none;
    margin-inline-start: 0;
    gap: 1rem;
    padding: 1.75rem 1.5rem 1.5rem;
  }

  .home .hero-trust .portrait {
    width: 96px;
    height: 96px;
  }

  .home .trust-title {
    font-size: 1.375rem;
  }
}

@media (max-width: 390px) {
  .home .hero-trust {
    gap: .875rem;
    padding: 1.5rem 1.125rem 1.25rem;
    border-radius: 12px;
  }

  .home .hero-trust .portrait {
    width: 80px;
    height: 80px;
  }

  .home .trust-title {
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .home .trust-body {
    font-size: .9375rem;
    line-height: 1.7;
  }

  .home .trust-qualifications {
    padding-top: .875rem;
  }
}