/* Gold pill buttons. Preview: variant 2 (13.09.2026). */
.button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 18px 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.button.primary {
  --button-fill: linear-gradient(180deg, #F7DC8C 0%, #E9C25B 48%, #D6AB40 100%);
  --button-border: transparent;
  --button-shadow: 0 4px 0 #A47D26, 0 12px 24px -5px #07142640, inset 0 2px 0 #FFF5CBCC;
  --button-shadow-hover: 0 5px 0 #A47D26, 0 19px 30px -5px #07142652, inset 0 2px 0 #FFF5CBE6;
  --button-shadow-active: 0 1px 0 #A47D26, 0 4px 10px -3px #07142640, inset 0 2px 5px #89631840;
  color: #0E1B2E;
  background: var(--button-fill);
  border-color: var(--button-border);
  box-shadow: var(--button-shadow);
}
.button.outline {
  color: #fff;
  background: transparent;
  border-color: #D7E3F1B3;
  box-shadow: 0 8px 18px -6px #00000033, inset 0 1px 0 #FFFFFF1A;
}
.button.header-cta {
  font-size: 15px;
  max-width: 245px;
}
@media (hover: hover) {
  .button.button:not(:disabled):hover { transform: translateY(-3px); }
  .button.primary:not(:disabled):hover { box-shadow: var(--button-shadow-hover); }
  .button.outline:not(:disabled):hover {
    background-color: #FFFFFF14;
    box-shadow: 0 13px 24px -6px #0000004D, inset 0 1px 0 #FFFFFF26;
  }
}
.button.button:not(:disabled):active {
  transform: translateY(2px);
  transition-duration: .08s;
}
.button.primary:not(:disabled):active { box-shadow: var(--button-shadow-active); }
.button.outline:not(:disabled):active {
  background-color: #FFFFFF1F;
  box-shadow: 0 2px 7px #00000026, inset 0 2px 4px #00000033;
}
.button.button:disabled { cursor: wait; transform: none; }
@media (max-width: 800px) {
  .button.header-cta { display: none; }
}
@media (max-width: 600px) {
  .button.button { width: 100%; max-width: none; min-height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .button.button { transition: none; }
  .button.button:not(:disabled):hover,
  .button.button:not(:disabled):active { transform: none; }
}