.navjoin {
  padding: 12px 16px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #087456, #0a4f44);
  box-shadow: 0 3px 0 #073d35;
}
nav .navjoin:hover { color: #fff; background: #086044; }
.membership-section { border-top: 1px solid #d5e3dc; }
.membership-layout {
  display: grid;
  grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr);
  gap: 42px;
  align-items: start;
}
.membership-aside {
  padding: 28px;
  border-radius: 16px;
  color: #e3eff7;
  background: linear-gradient(145deg, #102d46, #081c34);
  border: 1px solid #315267;
  box-shadow: 0 5px 0 #07162b, 0 15px 30px #071c3421;
}
.membership-aside h3 { color: #fff; margin: 0 0 16px; }
.membership-aside p { font-size: 13px; color: #bed0dd; line-height: 1.75; }
.membership-aside ol { padding-left: 20px; font-size: 13px; line-height: 1.8; }
.membership-aside li { margin-bottom: 13px; padding-left: 5px; }
.membership-recipient { border-top: 1px solid #ffffff26; margin-top: 22px; padding-top: 20px; }
.membership-recipient span { display: block; font-size: 9px; letter-spacing: 1.5px; color: #94d9bd; margin-bottom: 9px; }
.membership-recipient strong { font-size: 14px; color: #fff; overflow-wrap: anywhere; }
.membership-form {
  padding: 28px;
  border: 1px solid #d2dfdf;
  border-radius: 16px;
  background: #ffffffed;
  box-shadow: 0 8px 26px #0b2d4610;
}
.membership-form fieldset { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.membership-form legend { font-size: 15px; font-weight: 700; margin-bottom: 18px; color: #15334c; }
.membership-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.membership-field { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 600; }
.membership-field.wide { grid-column: 1 / -1; }
.membership-field input, .membership-field select {
  min-width: 0;
  width: 100%;
  border: 1px solid #bacbd7;
  border-radius: 7px;
  padding: 11px 12px;
  background: #fff;
  color: #10294a;
  font-size: 14px;
}
.membership-form .membership-consent { display: flex; align-items: start; gap: 10px; font-size: 12px; line-height: 1.65; margin-top: 16px; }
.membership-consent input { flex: 0 0 auto; margin-top: 4px; width: 17px; height: 17px; accent-color: #087456; }
.membership-privacy {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 0 0 24px;
  padding: 12px 16px;
  border: 1px solid #cfdfd7;
  border-radius: 8px;
  background: #eef6f2;
  color: #536b7b;
  font-size: 12px;
  line-height: 1.6;
}
.membership-privacy a { color: #086446; font-size: 14px; font-weight: 700; text-decoration: underline; }
.membership-privacy-page article { max-width: 72ch; margin: 0 auto; line-height: 1.75; }
.membership-privacy-page h2 { margin: 1.6em 0 .4em; font-size: clamp(20px, 2.5vw, 25px); }
.membership-privacy-page p { margin: 0 0 1em; }
.membership-privacy-page ul { padding-left: 1.25em; }
.membership-privacy-page li + li { margin-top: .45em; }
.membership-privacy-page a { color: #086446; text-decoration: underline; text-underline-offset: .15em; }
.membership-privacy-page strong { overflow-wrap: anywhere; }
.membership-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.membership-actions button, .membership-mail {
  padding: 12px 17px;
  border: 1px solid #0d614a;
  background: #087456;
  border-radius: 7px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.membership-actions .secondary { background: #fff; color: #16405a; border-color: #c1d1dd; }
.membership-actions button:disabled { opacity: .5; cursor: default; }
.membership-email-note { color: #647783; font-size: 12px; line-height: 1.7; }
.membership-message { font-size: 13px; line-height: 1.7; color: #154c3b; margin: 16px 0 0; overflow-wrap: anywhere; }
.membership-manual { border-top: 1px solid #dce5e9; margin-top: 22px; padding-top: 20px; }
.membership-manual p { font-size: 12px; line-height: 1.7; color: #536b7b; }
.membership-mail { display: inline-block; background: #edf5f0; color: #0d543c; }
.membership-form [hidden] { display: none !important; }
@media (max-width: 1000px) {
  .membership-layout { grid-template-columns: 1fr; gap: 25px; }
  .membership-aside { max-width: none; }
}
@media (max-width: 600px) {
  .membership-form, .membership-aside { padding: 22px 18px; }
  .membership-fields { grid-template-columns: 1fr; }
  .membership-actions { flex-direction: column; }
  .membership-actions button { width: 100%; }
}

.membership-template {
  display: block;
  padding: 13px 16px;
  border: 1px solid #94d9bd66;
  border-radius: 8px;
  background: #e5f7ed;
  color: #0b4e39;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}
.membership-aside .membership-template-note { font-size: 12px; }