.membership-page {
    --join-ink: #123651;
    --join-muted: #536677;
    --join-border: #cbd7e0;
    --join-field: #fff;
    --join-accent: #087990;
    max-width: 600px;
    margin: 56px auto 80px;
    color: var(--join-ink);
    letter-spacing: 0;
}
.membership-page .membership-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    color: var(--join-accent);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.5;
}
.membership-eyebrow::before { content: ''; width: 24px; height: 3px; background: currentColor; }
.membership-page h1 { margin: 0 0 16px; color: var(--join-ink); font-size: 36px; line-height: 1.2; letter-spacing: 0; }
.membership-page .membership-intro { margin: 0; color: var(--join-muted); font-size: 17px; line-height: 1.7; }
.membership-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; margin-top: 32px; }
.membership-form .membership-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; margin: 0; }
.membership-field > span { color: var(--join-ink); font-size: 14px; font-weight: 650; }
.membership-wide { grid-column: 1 / -1; }
.membership-page .membership-field input,
.membership-page .membership-field select,
.membership-page .membership-field .searchable-select input {
    min-height: 50px;
    width: 100%;
    border: 1px solid var(--join-border);
    border-radius: 8px;
    background: var(--join-field);
    color: var(--join-ink);
    padding: 12px 14px;
    font-size: 16px;
    box-shadow: none;
    transition: border-color 160ms, box-shadow 160ms;
}
.membership-page .membership-field input:focus,
.membership-page .membership-field select:focus { outline: 2px solid var(--join-accent); outline-offset: 3px; border-color: var(--join-accent); }
.membership-field small[role="alert"] { color: #b52a32; font-size: 13px; line-height: 1.5; }
.membership-form-footer { margin-top: 6px; border-top: 1px solid var(--join-border); padding-top: 22px; }
.membership-form-footer p { margin: 0 0 20px; color: var(--join-muted); font-size: 13px; line-height: 1.65; }
.membership-page .btn.primary { min-height: 50px; border: 1px solid #093661; border-radius: 8px; background: #093661; color: #fff; box-shadow: none; padding: 13px 24px; }
.membership-page .btn.primary:hover { background: #125381; border-color: #125381; }
.membership-page--received { max-width: 640px; margin-top: 72px; }
.membership-confirmation { padding-top: 8px; }
.membership-check { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 28px; border-radius: 50%; background: #e0f3e9; color: #197447; font-size: 28px; font-weight: 700; }
.membership-page .membership-next { max-width: 520px; margin: 20px 0 0; color: var(--join-muted); font-size: 16px; line-height: 1.8; }
.membership-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; border-top: 1px solid var(--join-border); margin-top: 36px; padding-top: 28px; }
.membership-contact { color: var(--join-accent); text-decoration: underline; text-underline-offset: 4px; font-size: 14px; font-weight: 600; }
html[data-theme="dark"] .membership-page { --join-ink: #eaf2f8; --join-muted: #b1c0ce; --join-border: #3b5062; --join-field: #111c27; --join-accent: #73d2e6; }
html[data-theme="dark"] .membership-page .btn.primary { background: #71d0e4; border-color: #71d0e4; color: #092839; }
html[data-theme="dark"] .membership-page .btn.primary:hover { background: #a0e3ef; }
html[data-theme="dark"] .membership-check { background: #173e32; color: #87e0b5; }
html[data-theme="dark"] .membership-field small[role="alert"] { color: #ffa4ac; }
@media (max-width: 600px) {
    .membership-page, .membership-page--received { margin: 32px auto 48px; padding: 0 8px; }
    .membership-page h1 { font-size: 30px; }
    .membership-form { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 26px; }
    .membership-footer { align-items: stretch; flex-direction: column; text-align: center; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) { .membership-page * { transition: none !important; } }