.membership-application-page {
  --ma-ink: #123b3c;
  --ma-muted: #526b6d;
  --ma-line: #8bb3b1;
  --ma-surface: #fffdf8;
  --ma-mint: #dcefeb;
  --ma-gold: #f3dda5;
  --ma-lavender: #e6dcf1;
  --ma-coral: #f2d8cf;
  --ma-danger: #9c3d35;
  --ma-success: #246a57;
  --ma-privacy-ink: #17292c;
}

:root[data-theme="dark"] .membership-application-page {
  --ma-ink: #f8f0dc;
  --ma-muted: #b8cac6;
  --ma-line: #5e8f88;
  --ma-surface: #173d39;
  --ma-mint: #25534d;
  --ma-gold: #725f31;
  --ma-lavender: #534567;
  --ma-coral: #68483f;
  --ma-danger: #ffb8ad;
  --ma-success: #a9e2ca;
  --ma-privacy-ink: #17292c;
}

.membership-application-hero {
  align-items: start;
}

.membership-application-hero .zh-hero-copy {
  position: sticky;
  top: 118px;
}

.membership-trust-list {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.membership-trust-list > span {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1.5px solid var(--ma-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ma-surface) 82%, var(--ma-mint));
  color: var(--ma-ink);
}

.membership-trust-list b {
  grid-row: 1 / span 2;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: var(--ma-gold);
  font-size: 0.72rem;
}

.membership-trust-list strong,
.membership-trust-list small {
  min-width: 0;
}

.membership-trust-list strong {
  font-size: 0.94rem;
}

.membership-trust-list small {
  color: var(--ma-muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
}

.membership-application-card {
  max-width: 680px;
}

.membership-application-form .zr-form-grid {
  align-items: start;
}

.membership-application-form select.zr-input {
  appearance: auto;
}

.membership-application-form textarea.zr-input {
  min-height: 132px;
  resize: vertical;
  line-height: 1.5;
}

.membership-application-form label > span {
  color: var(--ma-muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.membership-application-form .zr-consent-check > span,
.membership-application-form .zr-consent-check a {
  color: var(--ma-privacy-ink);
}

.membership-google-notice {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--ma-line);
  border-radius: 16px;
  background: var(--ma-mint);
  color: var(--ma-ink);
}

.membership-google-notice span {
  color: var(--ma-muted);
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.45;
}

.membership-google-notice a {
  width: max-content;
  margin-top: 3px;
  color: var(--ma-ink);
  font-size: 0.8rem;
  font-weight: 900;
}

.membership-flash {
  margin-bottom: 14px;
  padding: 13px 15px;
  border: 1px solid var(--ma-line);
  border-radius: 8px;
  background: var(--ma-mint);
  color: var(--ma-ink);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.5;
}

.membership-flash-error {
  border-color: var(--ma-danger);
  background: var(--ma-coral);
  color: var(--ma-danger);
}

.membership-flash-success {
  color: var(--ma-success);
}

.membership-flash-warning {
  background: var(--ma-gold);
}

.membership-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.membership-form-actions {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.membership-form-actions .zr-submit {
  text-align: center;
  text-decoration: none;
}

.membership-secondary-action {
  color: var(--ma-ink);
  font-size: 0.86rem;
  font-weight: 900;
  text-align: center;
}

@media (max-width: 980px) {
  .membership-application-hero .zh-hero-copy {
    position: static;
  }

  .membership-application-card {
    max-width: none;
  }
}