/*
 * "Powered By YordaTech" endorsement — YordaTech brand asset, v2 mark.
 * The seal stands in for the capital Y, so the lockup reads as one word:
 * [seal]ordaTech. Drop this file in static/ and link it after styles.css.
 * Do not edit the seal geometry; request new artwork instead.
 */
.endorse {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 1.75rem 0 0.25rem;
  color: #5A6570;
}
.endorse-lead {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The seal is a letterform here: sized to cap height and kerned tight to the
 * following text so "ordaTech" completes the word. */
.endorse-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.5px;
}
.endorse-seal {
  display: block;
  width: 15px;
  height: 15px;
  flex: none;
}
.endorse-name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}

/* Variant for the green auth pages — white seal, cuts show the green.
 * .unlock-body is a centering flexbox, so stack the card and the seal. */
.unlock-body { flex-direction: column; }
.endorse--ongreen { color: rgba(255, 255, 255, 0.85); margin: 1.5rem 0 0.5rem; }
.endorse--ongreen .endorse-name { color: #fff; }

/* The lockup is decorative markup; screen readers get the real words. */
.endorse-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}