.yop-who {
  background:
    linear-gradient(180deg, rgba(20, 22, 16, 0.94), rgba(8, 10, 8, 0.97));
  border: 1px solid color-mix(in srgb, #c8a24a 45%, #000);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 12px 40px rgba(0, 0, 0, 0.45);
  color: #e8e2c8;
  padding-block: 1.6rem;
  padding-inline: 1.6rem;
}

.yop-who-kicker {
  grid-area: kicker;
  margin-block: 0;
  margin-inline: 0;
  font-family: "Ubuntu", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #c8a24a;
}

.yop-who h2 {
  margin-block: 0.4rem 0.8rem;
  margin-inline: 0;
  font-family: "Ubuntu", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f3ead0;
}

.yop-who-copy {
  margin-block: 0 1.4rem;
  margin-inline: 0;
  font-size: 1.5rem;
  line-height: 1.45;
}

.yop-who-copy strong {
  color: #ffe27a;
}

.yop-who-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block-end: 1.2rem;
  font-family: "Ubuntu", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c8a24a;
}

.yop-who-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.yop-who-field input,
.yop-who-field select {
  appearance: none;
  width: 100%;
  border: 1px solid #c8a24a;
  background: #111;
  color: #f3ead0;
  font-family: "Ubuntu", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding-block: 0.8rem;
  padding-inline: 1rem;
}

.yop-who-field select {
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #c8a24a 50%),
    linear-gradient(135deg, #c8a24a 50%, transparent 50%);
  background-position:
    calc(100% - 1.6rem) calc(50% - 0.2rem),
    calc(100% - 1.1rem) calc(50% - 0.2rem);
  background-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
  background-repeat: no-repeat;
  padding-inline-end: 2.8rem;
}

.yop-who-field input::placeholder {
  color: color-mix(in srgb, #f3ead0 45%, transparent);
  font-weight: 400;
}

.yop-who-confirm {
  appearance: none;
  border: 1px solid #c8a24a;
  background: #c8a24a;
  color: #111;
  font-family: "Ubuntu", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-block: 0.7rem;
  padding-inline: 1.2rem;
  touch-action: manipulation;
}

.yop-who-confirm:disabled {
  opacity: 0.4;
}

.yop-who-confirm:hover:not(:disabled),
.yop-who-confirm:focus-visible:not(:disabled) {
  background: #ffe27a;
}