#npgc-membership-root {
--green-deep: #16362A;
--green-mid: #2F6B4F;
--green-line: #DCE5DC;
--cream: #F7F3E8;
--gold: #A9814B;
--gold-soft: #F1E6CE;
--ink: #1C231F;
--ink-soft: #5B6660;
--white: #FFFFFF;
font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--cream);
padding: 2.5rem 1.25rem 3rem;
box-sizing: border-box;
max-width: 1080px;
margin: 0 auto;
border-radius: 4px;
}
#npgc-membership-root *,
#npgc-membership-root *::before,
#npgc-membership-root *::after {
box-sizing: border-box;
}
#npgc-membership-root .npgc-eyebrow {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 1.05rem;
color: var(--green-mid);
text-align: center;
margin: 0 0 0.35rem;
}
#npgc-membership-root h1 {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
font-size: clamp(2rem, 4.5vw, 2.85rem);
line-height: 1.08;
text-align: center;
color: var(--green-deep);
margin: 0 0 0.75rem;
letter-spacing: -0.01em;
}
#npgc-membership-root .npgc-sub {
text-align: center;
font-size: 1.05rem;
color: var(--ink-soft);
max-width: 42ch;
margin: 0 auto 1.75rem;
line-height: 1.5;
}
#npgc-membership-root .npgc-deadline {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
background: var(--green-deep);
color: var(--cream);
border-radius: 999px;
padding: 0.55rem 1.25rem;
font-size: 0.92rem;
width: fit-content;
margin: 0 auto 2.5rem;
}
#npgc-membership-root .npgc-deadline strong {
color: var(--gold-soft);
font-weight: 700;
}
#npgc-membership-root .npgc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem;
}
@media (max-width: 860px) {
#npgc-membership-root .npgc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
#npgc-membership-root .npgc-grid { grid-template-columns: 1fr; }
#npgc-membership-root { padding: 2rem 1rem 2.5rem; }
}
#npgc-membership-root .npgc-card {
background: var(--white);
border: 1px solid var(--green-line);
border-radius: 6px;
padding: 1.5rem 1.35rem 1.35rem;
display: flex;
flex-direction: column;
position: relative;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#npgc-membership-root .npgc-card:hover {
border-color: var(--green-mid);
box-shadow: 0 4px 18px rgba(22, 54, 42, 0.08);
}
#npgc-membership-root .npgc-tier-name {
font-family: 'Fraunces', Georgia, serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--green-deep);
margin: 0 0 0.15rem;
}
#npgc-membership-root .npgc-tier-desc {
font-size: 0.88rem;
color: var(--ink-soft);
margin: 0 0 1rem;
min-height: 2.4em;
}
#npgc-membership-root .npgc-price-row {
display: flex;
align-items: baseline;
gap: 0.55rem;
margin-bottom: 0.4rem;
flex-wrap: wrap;
}
#npgc-membership-root .npgc-price {
font-family: 'Fraunces', Georgia, serif;
font-size: 1.85rem;
font-weight: 600;
color: var(--ink);
}
#npgc-membership-root .npgc-price-regular {
font-size: 1rem;
color: var(--ink-soft);
text-decoration: line-through;
text-decoration-color: var(--ink-soft);
}
#npgc-membership-root .npgc-save-badge {
display: inline-block;
background: var(--gold-soft);
color: #6B4F1F;
font-size: 0.78rem;
font-weight: 600;
padding: 0.2rem 0.6rem;
border-radius: 999px;
margin-bottom: 1.1rem;
width: fit-content;
}
#npgc-membership-root .npgc-save-badge.npgc-no-save {
visibility: hidden;
}
#npgc-membership-root .npgc-select-btn {
margin-top: auto;
background: var(--green-deep);
color: var(--cream) !important;
border: none;
border-radius: 4px;
padding: 0.7rem 1rem;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
text-align: center;
text-decoration: none !important;
transition: background 0.15s ease;
font-family: inherit;
display: block;
}
#npgc-membership-root .npgc-select-btn:hover {
background: var(--green-mid);
}
#npgc-membership-root .npgc-select-btn:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
#npgc-membership-root .npgc-btn-disabled {
background: var(--ink-soft);
cursor: default;
}
#npgc-membership-root .npgc-footer {
text-align: center;
margin-top: 2.5rem;
padding-top: 1.75rem;
border-top: 1px solid var(--green-line);
color: var(--ink-soft);
font-size: 0.88rem;
line-height: 1.7;
}
#npgc-membership-root .npgc-footer strong {
color: var(--ink);
}