.ua-btn {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: var(--ua-space-2);
  padding: 0.7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--ua-radius-sm);
  cursor: pointer;
  font-size: var(--ua-text-sm);
  font-weight: 800;
  line-height: 1.4;
  transition: transform var(--ua-fast) var(--ua-ease), box-shadow var(--ua-fast) var(--ua-ease), background var(--ua-fast) var(--ua-ease);
}

.ua-btn:hover {
  transform: translateY(-2px);
}

.ua-btn--gold {
  background: linear-gradient(120deg, var(--ua-gold-300), var(--ua-gold-500));
  color: var(--ua-navy-950);
  box-shadow: 0 10px 30px rgb(190 141 62 / 20%);
}

.ua-btn--gold:hover {
  box-shadow: 0 14px 36px rgb(190 141 62 / 30%);
}

.ua-btn--dark {
  background: var(--ua-navy-900);
  color: #fff;
}

.ua-btn--light {
  border-color: var(--ua-line);
  background: var(--ua-surface);
  color: var(--ua-ink);
}

.ua-btn--ghost {
  border-color: rgb(255 255 255 / 20%);
  background: rgb(255 255 255 / 5%);
  color: #fff;
}

.ua-card {
  border: 1px solid var(--ua-line);
  border-radius: var(--ua-radius-lg);
  background: var(--ua-surface);
  box-shadow: var(--ua-shadow-sm);
}

.ua-card--interactive {
  transition: transform var(--ua-normal) var(--ua-ease), border-color var(--ua-normal) var(--ua-ease), box-shadow var(--ua-normal) var(--ua-ease);
}

.ua-card--interactive:hover {
  transform: translateY(-5px);
  border-color: rgb(190 141 62 / 40%);
  box-shadow: var(--ua-shadow-md);
}

.ua-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--ua-radius-pill);
  background: var(--ua-blue-100);
  color: var(--ua-blue-600);
  font-size: var(--ua-text-xs);
  font-weight: 800;
}

.ua-badge--gold {
  background: #f9edd4;
  color: var(--ua-gold-700);
}

.ua-field {
  display: grid;
  gap: var(--ua-space-2);
}

.ua-field > span {
  color: var(--ua-ink);
  font-size: var(--ua-text-sm);
  font-weight: 700;
}

.ua-input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ua-line);
  border-radius: var(--ua-radius-sm);
  background: var(--ua-surface);
  color: var(--ua-ink);
  outline: none;
  transition: border-color var(--ua-fast), box-shadow var(--ua-fast);
}

.ua-input:focus {
  border-color: var(--ua-gold-500);
  box-shadow: var(--ua-focus);
}

.ua-icon-box {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: var(--ua-radius-md);
  background: var(--ua-blue-100);
  color: var(--ua-blue-600);
}

.ua-icon-box--gold {
  background: #f9edd4;
  color: var(--ua-gold-700);
}


/* Page hero artwork. On wide screens it sits behind the hero from the left edge, and its width is worked out so
   the subject (the left --ua-art-subject share of the image) ends just before the text column, whose width the
   page sets in --ua-art-text. It hangs from the top by default; a page can rest it on the bottom instead
   (--ua-art-top: auto; --ua-art-bottom: 0), fade its top edge (--ua-art-fade-top), or clear the image behind
   the text when it is busy there: fully transparent up to --ua-art-clear-right from the right edge, fully shown
   from --ua-art-fade-right (the text starts about 40% in from that edge). On tablets and phones
   it stacks above the text. The hero section needs .ua-has-art. */
.ua-has-art {
  position: relative;
  isolation: isolate;
}

.ua-hero-art {
  --ua-art-width: calc(((100% + min(var(--ua-container), 100% - 5.5rem)) / 2 - var(--ua-art-text, 32rem) - 1.5rem) / var(--ua-art-subject, 0.66));
  position: absolute;
  top: var(--ua-art-top, 0);
  bottom: var(--ua-art-bottom, auto);
  left: 0;
  z-index: -1;
  display: block;
  width: min(var(--ua-art-width), 100%);
  max-height: 100%;
  aspect-ratio: var(--ua-art-ratio, 16 / 9);
  overflow: hidden;
  /* Fade the edges to transparent so the art melts into whatever background the hero has */
  -webkit-mask-image: linear-gradient(270deg, transparent var(--ua-art-clear-right, 0%), #000 var(--ua-art-fade-right, 24%)), linear-gradient(0deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent 0%, #000 var(--ua-art-fade-top, 0%));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(270deg, transparent var(--ua-art-clear-right, 0%), #000 var(--ua-art-fade-right, 24%)), linear-gradient(0deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent 0%, #000 var(--ua-art-fade-top, 0%));
  mask-composite: intersect;
}

.ua-hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ua-art-position, 0% 30%);
}

@media (max-width: 62rem) {
  .ua-hero-art {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    z-index: 0;
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 9;
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 34%);
    mask-image: linear-gradient(0deg, transparent 0%, #000 34%);
  }
}

@media (max-width: 48rem) {
  .ua-hero-art {
    aspect-ratio: 4 / 3;
  }
}

/* The small gold label above a hero title sits on the dark hero, so it takes the light gold */
.ua-has-art .ua-kicker,
.ua-auth-hero .ua-kicker {
  color: var(--ua-gold-400);
}