[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  #application { animation: appear .3s ease-out; }
  #application h1 { animation: rise .6s ease-out .15s both; }
  #success:not([hidden]) > div { animation: confirm .5s cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes appear { from { opacity: 0; } }
  @keyframes rise { from { opacity: 0; transform: translateY(20px); } }
  @keyframes confirm { from { opacity: 0; transform: translateY(24px) scale(.98); } }
}

.plan-options { min-width: 0; }
.plan-options > p { margin-bottom: 0.5rem; }

.plan-option {
  display: flex;
  flex-direction: column;
  border-color: #ded8cd;
  background: rgb(255 255 255 / 50%);
  cursor: pointer;
}

.plan-option:hover,
.plan-option:has(input:checked) {
  border-color: #af862e;
  background: rgb(175 134 46 / 6%);
}

.plan-option:has(input:focus-visible) {
  outline: 2px solid #af862e;
  outline-offset: 2px;
}

.plan-option-heading {
  display: flex;
  min-height: 1.5rem;
  align-items: center;
  gap: 0.5rem;
}

.plan-option-heading input {
  width: 1rem;
  height: 1rem;
  accent-color: #927022;
}

.plan-code {
  color: #526078;
  font-size: 0.75rem;
  font-weight: 600;
}

.plan-recommended {
  margin-left: auto;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  background: #f1e6ce;
  color: #6f4e10;
  font-size: 0.6875rem;
  font-weight: 700;
}

.plan-detail {
  flex: 1;
  margin-top: 0.25rem;
  color: #526078;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.plan-prices {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
}

.plan-prices > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.125rem 0.5rem;
}

.plan-prices > div + div {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid #ded8cd;
}

.plan-prices dd { font-variant-numeric: tabular-nums; }
.plan-prices s, .plan-prices dd span { color: #526078; font-size: 0.75rem; }
.plan-prices strong { margin-left: 0.25rem; color: #755719; font-size: 1.125rem; }

.plan-option { position: relative; }
.plan-option-heading { cursor: pointer; }
.plan-option-heading::after { position: absolute; inset: 0; content: ""; }