/* Membership page — October 2026 Figma design. */
.membership-page { color: #0b194f; font-weight: 500; }
.membership-page h1, .membership-page h2, .membership-page h3 { font-weight: 400; color: inherit; }
.membership-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 500px; padding: 80px 0; background: radial-gradient(ellipse 75% 80% at 54% 120%, #6babf5 0%, #bfdbfa 45%, #fafafa 95%); }
.membership-hero > .container { position: relative; z-index: 1; }
.membership-hero h1 { font-size: var(--dcso-font-size-h1); line-height: 1.1; margin: 0; letter-spacing: -.035em; }
.membership-intro { display: grid; grid-template-columns: 1fr 1.1fr; gap: 6%; padding-top: 145px; padding-bottom: 125px; align-items: start; }
.membership-intro figure { margin: 0; }
.membership-intro img { width: 100%; aspect-ratio: 747 / 478; object-fit: cover; border-radius: 12px; display: block; }
.membership-intro figcaption { margin: 12px 16px 0; font-size: 10px; color: #001B54; font-weight: 500; }
.membership-intro h2 { font-size: clamp(30px, 3.05vw, 58px); line-height: 1.18; margin: 12px 0 28px; letter-spacing: -.025em; }
.membership-intro p { font-size: clamp(16px, 1.36vw, 26px); line-height: 1.35; max-width: 760px; }
.membership-benefits { padding: 100px 0 115px; background: #fbfaf8; }
.membership-page .membership-eyebrow { font-family: var(--dcso-font-family-body); font-size: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 50px; line-height: 1.4; }
.membership-benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 14px; overflow: hidden; }
.membership-benefit { position: relative; aspect-ratio: 833 / 527; background: #0b194f; color: #fff; }
.membership-benefit-toggle { list-style: none; cursor: pointer; position: absolute; inset: 0; display: block; }
.membership-benefit-toggle::-webkit-details-marker { display: none; }
.membership-benefit-toggle::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.6)); transition: opacity .25s; }
.membership-benefit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.membership-benefit-title { position: absolute; z-index: 1; bottom: 38px; left: 40px; right: 40px; max-width: none; font-family: var(--dcso-font-family-heading); font-size: clamp(23px, 2.083333vw, 40px); line-height: 1.18; transition: opacity .25s; }
.membership-benefit-description { position: absolute; left: 40px; right: 40px; bottom: 40px; max-width: 530px; font-size: clamp(16px, 1.05vw, 20px); line-height: 1.3; pointer-events: none; opacity: 0; transition: opacity .25s; }
.membership-benefit-description p { margin: 0 0 24px; }
.membership-benefit-description p:last-child { margin: 0; }
.membership-benefit.is-expanded img, .membership-benefit.is-expanded .membership-benefit-toggle::after, .membership-benefit.is-expanded .membership-benefit-title { opacity: 0; }
.membership-benefit.is-expanded .membership-benefit-description { opacity: 1; }
.membership-benefit-toggle:focus-visible { outline: 3px solid #bb8e31; outline-offset: -6px; z-index: 2; }
.membership-subscription { padding-top: 120px; padding-bottom: 180px; color: #550000; }
.membership-subscription-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10%; margin-bottom: 95px; }
.membership-subscription-top > h2 { grid-column: 1 / 3; }
.membership-subscription-top > div { grid-column: 3; }
.membership-subscription h2 { color: #FF484F; font-size: clamp(36px, 3.9vw, 74px); line-height: 1.2; margin: 0; letter-spacing: -.025em; }
.membership-subscription-top p { font-size: clamp(16px, 1.302083vw, 25px); line-height: 1.3; font-weight: 500; margin: 16px 0 20px; }
.membership-funding-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10%; }
.membership-funding-grid > div { border-top: 2px solid #FF484F; padding-top: 35px; }
.membership-funding-grid h3 { font-size: clamp(30px, 3vw, 58px); line-height: 1.2; margin: 0 0 40px; }
.membership-funding-grid p { font-size: clamp(16px, 1.36vw, 26px); line-height: 1.4; font-weight: 500; }
.membership-fees { padding: 85px 0 100px; background: #fbfaf8; }
.membership-fees .membership-eyebrow { font-size: 20px; font-weight: 600; text-align: center; color: #161616; margin-bottom: 55px; }
.membership-plans { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.membership-plan { --membership-button-color: #0b194f; position: relative; display: flex; flex-direction: column; padding: 45px 40px; border-radius: 12px; overflow: hidden; min-height: 750px; background: url('../images/joins-bg2.svg') center/100% 100%; }
.membership-plan--lifetime { --membership-button-color: #8c5a13; color: #8c5a13; background-image: url('../images/joins-bg3.svg'); }
.membership-plan--international { --membership-button-color: #550000; color: #550000; background-image: url('../images/joins-bg1.svg'); }
.membership-plan h3 { font-size: clamp(30px, 3vw, 58px); line-height: 1.2; margin: 0 0 25px; letter-spacing: -.025em; }
.membership-plan-intro { min-height: 95px; font-size: 20px; line-height: 1.3; margin-bottom: 0; }
.membership-price { font-weight: 400; margin: 20px 0 30px; font-family: var(--dcso-font-family-heading); font-size: 72px; line-height: 1; }
.membership-price span { font-weight: 500; display: block; font-family: var(--dcso-font-family-body); font-size: 18px; line-height: 1.4; }
.membership-join { display: block; text-align: center; padding: 9px 12px; border: 2px solid var(--membership-button-color); color: inherit; border-radius: 4px; font-size: 20px; font-weight: 500; line-height: 1.4; transition: color .2s, background .2s; }
.membership-join:hover, .membership-join:focus-visible { color: #fff; background: var(--membership-button-color); outline-offset: 4px; }
.membership-plan ul { padding-left: 28px; margin: 32px 0 40px; font-size: 20px; font-weight: 500; line-height: 1.4; }
.membership-plan li { margin-bottom: 24px; }
.membership-plan-note { margin: auto 0 0; font-size: 14px; color: #fff; }
@media (max-width: 1199px) {
    .membership-hero { min-height: 400px; padding: 70px 0; }
    .membership-intro { padding-top: 85px; padding-bottom: 80px; }
    .membership-benefits { padding: 70px 0; }
    .membership-subscription { padding-top: 80px; padding-bottom: 95px; }
    .membership-subscription-top { gap: 6%; margin-bottom: 65px; }
    .membership-funding-grid { gap: 6%; }
    .membership-benefit-title, .membership-benefit-description { left: 26px; right: 26px; bottom: 26px; }
    .membership-benefit { min-height: 310px; }
    .membership-plan { padding: 30px 22px; min-height: 600px; }
    .membership-plan-intro, .membership-plan ul, .membership-join { font-size: 16px; }
    .membership-price { font-size: 55px; }
    .membership-plan-intro { min-height: 85px; }
}
@media (max-width: 767px) {
    .membership-hero { min-height: 340px; padding: 60px 0; }
    .membership-intro { grid-template-columns: 1fr; gap: 25px; padding-top: 55px; padding-bottom: 55px; }
    .membership-intro h2 { margin: 0 0 22px; font-size: 32px; }
    .membership-intro figcaption { font-size: 9px; margin-left: 0; }
    .membership-benefits { padding: 50px 0; }
    .membership-page .membership-eyebrow { font-size: 18px; margin-bottom: 28px; }
    .membership-benefit-grid { grid-template-columns: 1fr; }
    .membership-benefit { aspect-ratio: 1.3; min-height: 300px; }
    .membership-benefit-title { font-size: clamp(18px, 5.8vw, 29px); }
    .membership-benefit-description { font-size: 16px; }
    .membership-benefit-description p { margin-bottom: 18px; }
    .membership-subscription { padding-top: 55px; padding-bottom: 55px; }
    .membership-subscription-top { grid-template-columns: 1fr; gap: 20px; margin-bottom: 35px; }
    .membership-subscription-top > h2, .membership-subscription-top > div { grid-column: auto; }
    .membership-subscription h2 { font-size: 36px; }
    .membership-subscription h2 br { display: none; }
    .membership-funding-grid { grid-template-columns: 1fr; gap: 25px; }
    .membership-funding-grid > div { padding-top: 22px; }
    .membership-funding-grid h3 { font-size: 30px; margin-bottom: 14px; }
    .membership-funding-grid h3 br { display: none; }
    .membership-funding-grid p { margin-bottom: 0; }
    .membership-fees { padding: 50px 0; }
    .membership-plans { grid-template-columns: 1fr; gap: 20px; }
    .membership-plan { min-height: 570px; padding: 32px 28px; }
    .membership-plan h3 { font-size: 38px; margin-bottom: 20px; }
    .membership-plan-intro { min-height: 0; max-width: 320px; }
    .membership-price { margin-top: 40px; }
    .membership-join { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .membership-page *, .membership-page *::after { transition: none !important; }
}

.membership-benefit { width: 100%; min-width: 0; }
.membership-benefit-toggle, .membership-benefit-toggle:hover, .membership-benefit-toggle:focus { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; text-align: left; white-space: normal; font-weight: 400; }
@media (max-width: 380px) {
    .membership-benefit:nth-child(3) { min-height: 340px; }
}
.membership-plan ul { list-style: disc outside; }
.membership-join, .membership-join:hover, .membership-join:focus { text-decoration: none; }
.membership-intro figcaption { font-style: normal; }


/* Keep the design’s intentional copy lines without introducing narrow-screen overflow. */
@media (min-width: 768px) {

}
@media (max-width: 767px) {
    .membership-fees .membership-eyebrow { font-size: 18px; }
}

@media (min-width: 1200px) {

}
@media (max-width: 767px) {
    .membership-benefit:last-child .membership-benefit-title { font-size: clamp(16px, 5vw, 26px); }
}

/* Editable copy must wrap within its column, including future longer wording. */
.membership-subscription-top > div, .membership-benefit-title { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.membership-subscription-top p { max-width: 100%; }
.membership-plan-intro p:last-child, .membership-plan-note p:last-child { margin-bottom: 0; }