*,*::before,*::after {
box-sizing:border-box;margin:0;padding:0;
}

.login-wrap {
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;
}

.login-head {
text-align:center;margin-bottom:40px;max-width:560px;
}

.login-eyebrow {
font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--org);text-transform:uppercase;margin-bottom:12px;
}

.login-title {
font-family:'DM Serif Display',serif;font-size:38px;color:#1a1a1a;margin-bottom:12px;line-height:1.1;
}

.login-sub {
font-size:17px;color:#777;line-height:1.6;
}

.role-grid {
display:flex;flex-wrap:wrap;justify-content:center;gap:22px;max-width:1420px;width:100%;
}

.role-card {
background:#fff;border:2px solid #ede8e1;border-radius:var(--radius);padding:28px 24px;color:inherit;display:flex;flex-direction:column;text-align:left;transition:all .2s;position:relative;overflow:hidden;flex:1 1 310px;max-width:340px;
}

.role-card::before {
content:'';position:absolute;top:0;left:0;right:0;height:4px;transform:scaleX(0);transition:transform .2s;transform-origin:left;
}

.role-card.vol::before {
background:var(--org);
}

.role-card.nfp::before {
background:#2a9d8f;
}

.role-card.co::before {
background:#1a3568;
}

.role-card.new::before {
background:#5a9e5a;
}

.role-card:hover {
border-color:#dcd5cb;box-shadow:0 12px 36px rgba(0,0,0,.10);transform:translateY(-4px);
}

.role-card:hover::before {
transform:scaleX(1);
}

.role-top {
display:flex;align-items:center;gap:13px;margin-bottom:16px;
}

.role-icon {
width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;
}

.role-icon.vol {
background:var(--org-l);
}

.role-icon.nfp {
background:#E6F6F4;
}

.role-icon.co {
background:#E8EDF9;
}

.role-icon.new {
background:#EAF5EA;
}

.role-name {
font-size:19px;font-weight:700;color:#1a1a1a;line-height:1.1;margin-bottom:3px;
}

.role-for {
font-size:12.5px;color:#999;line-height:1.3;
}

.why-head {
font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#b3a89c;margin-bottom:11px;
}

.why-list {
list-style:none;margin:0 0 20px;padding:0;flex:1;
}

.why-list li {
position:relative;padding:0 0 12px 21px;font-size:13.5px;line-height:1.5;color:#555;
}

.why-list li:last-child {
padding-bottom:0;
}

.why-list li::before {
content:'→';position:absolute;left:0;top:0;font-weight:700;
}

.why-list.vol li::before {
color:var(--org);
}

.why-list.nfp li::before {
color:#2a9d8f;
}

.why-list.co li::before {
color:#1a3568;
}

.why-list.new li::before {
color:#5a9e5a;
}

.why-list li b {
color:#1a1a1a;font-weight:700;
}

.role-btn {
display:block;text-align:center;padding:12px;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none;color:#fff;margin:18px 0 9px;transition:opacity .15s;
}

.role-btn.vol {
background:var(--org);
}

.role-btn.nfp {
background:#2a9d8f;
}

.role-btn.co {
background:#1a3568;
}

.role-btn.new {
background:#5a9e5a;
}

.role-btn:hover {
opacity:.9;
}

button.role-btn {
width:100%;border:none;cursor:pointer;font-family:inherit;
}

.login-form-card {
background:#fff;border:2px solid #ede8e1;border-radius:var(--radius);padding:32px 28px;max-width:420px;width:100%;
}

.login-back {
display:inline-block;font-size:13px;font-weight:600;color:#9a9a9a;text-decoration:none;margin-bottom:18px;
}

.login-back:hover {
color:#666;
}

.login-form-title {
font-family:'DM Serif Display',serif;font-size:28px;color:#1a1a1a;margin-bottom:8px;
}

.login-form-sub {
font-size:15px;color:#777;margin-bottom:22px;line-height:1.5;
}

.login-field {
margin-bottom:16px;
}

.login-field label {
display:block;font-size:12.5px;font-weight:600;color:#555;margin-bottom:6px;
}

.login-field input {
width:100%;box-sizing:border-box;border:1.5px solid #e0dbd2;border-radius:8px;padding:10px 13px;font-size:14px;font-family:inherit;outline:none;background:#fafaf8;
}

.login-field input:focus {
border-color:var(--org);background:#fff;
}

.login-error {
color:#c0392b;font-size:13px;margin-bottom:14px;
}

.login-status {
color:#1f7a3a;font-size:13px;margin-bottom:14px;font-weight:600;
}

.login-option-row {
margin: -4px 0 14px;
}

.login-form-link {
font-size:12.5px;color:#9a9a9a;text-decoration:none;font-weight:600;
}

.login-form-link:hover {
color:#666;text-decoration:underline;
}

.role-signin {
display:block;text-align:center;font-size:12.5px;color:#9a9a9a;text-decoration:none;font-weight:600;
}

.role-signin:hover {
color:#666;text-decoration:underline;
}

.login-foot {
text-align:center;margin-top:34px;font-size:13.5px;color:#999;
}

.login-foot a {
color:var(--org);font-weight:600;text-decoration:none;
}

@media(max-width:768px) {
.role-grid {max-width:360px;}
.login-title {font-size:30px;}
.login-sub {font-size:15px;}
.role-card {padding:26px 22px;}
}

/* extracted inline styles */
.login-i1 {
  width:100%;height:100%;
}