﻿/* The subscription catalog remains database driven; these rules only control presentation. */
body:has(.membership-page){background:#f2f3fa;font-family:MarketplaceThmanyah,-apple-system,system-ui,'Segoe UI',sans-serif}
.membership-page{width:calc(100% - 30px);max-width:1250px;margin:0 auto;padding:16px 0 234px;color:#474955;font-size:16px;line-height:24px}
.membership-back{display:flex;justify-content:flex-start;color:#999;height:58px}.membership-back svg{width:30px;height:30px}
.membership-page h1{text-align:center;font-size:28px;line-height:36px;margin:20px 0 50px;font-weight:700}
.membership-card{background:#fff;border-radius:39px;margin:0 auto 20px;overflow:hidden;max-width:95vw}
.membership-page h2{color:#1683d0;font-size:20px;line-height:28px;font-weight:700;margin:8px 0}
.membership-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.membership-info{width:100%;text-align:center;min-height:352px;padding:40px;display:flex;flex-direction:column;align-items:center;gap:8px}
.membership-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:#e6f4ff;color:#087cca;font-size:24px}
.membership-info p{margin:0}.membership-info h2{margin:8px 0}
.membership-pricing{text-align:center;padding:40px;min-height:336px;display:flex;flex-direction:column;align-items:center;gap:8px}
.membership-pricing .membership-icon{margin:0}.membership-offers{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;width:100%;margin-top:8px}
.membership-offers article{flex:0 1 468px;min-width:0;max-width:100%}.membership-offers h3{font-size:14px;line-height:20px;margin:0 0 5px;color:#1683d0;overflow-wrap:anywhere}
.membership-price{display:block;background:#f2f3fa;color:#1683d0;font-size:17.6px;line-height:26.4px;font-weight:700;padding:12px 8px;border-radius:6px;overflow-wrap:anywhere}
.membership-guest{display:table;background:#f4dddd;color:#d86565;border:1px solid #f0cbcb;border-radius:10px;padding:3px 7px;margin:24px auto 0;font-size:16px;line-height:24px}
.membership-terms{padding:40px;color:#1683d0;min-height:362px}.membership-terms h2{margin:8px 0 16px}.membership-terms ul{margin:0;padding-inline-start:40px;line-height:28px}
.membership-faq .membership-card{margin-bottom:20px}.membership-faq h2{margin:0}.membership-faq button{font:inherit;font-size:18px;line-height:28px;width:100%;border:0;background:transparent;color:#999;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:start;padding:40px;min-height:175px;cursor:pointer}.membership-faq i{font-size:24px;flex-shrink:0;transition:transform .2s}.membership-faq button:hover,.membership-faq button[aria-expanded=true]{color:#1683d0;background:#f8fafc}.membership-faq button[aria-expanded=true] i{transform:rotate(180deg)}
.membership-answer{padding:0 40px 40px}.membership-answer p{margin:0;white-space:pre-line}.membership-contact{display:block;text-align:center;color:#999;font-size:20px;line-height:28px;margin-top:24px}
body:has(.membership-page) .hj-header-inner{max-width:1280px}body:has(.membership-page) .hj-footer{background:#f2f3fa}body:has(.membership-page) .hj-apps{margin-block:0 20px}body:has(.membership-page) .hj-property-notice{background:#ffcf36;border-radius:10px;margin-block:0 16px;padding:8px 20px;gap:10px;color:#333}body:has(.membership-page) .hj-property-notice img{max-width:96px;max-height:48px}body:has(.membership-page) .hj-property-copy{order:-1}body:has(.membership-page) .hj-footer-links{border-top:1px solid var(--hj-border)}
@media(max-width:767px){.membership-page h1{font-size:24px;line-height:32px}.membership-intro{grid-template-columns:minmax(0,1fr);row-gap:10px}.membership-info{min-height:300px;padding:20px}.membership-page h2{font-size:18px;line-height:28px}.membership-pricing{padding:20px;min-height:300px}.membership-terms{padding:20px;min-height:300px}.membership-faq button{font-size:16px;line-height:24px;padding:20px;min-height:175px}.membership-answer{padding:0 20px 20px}.membership-offers article{flex-basis:100%}.membership-contact{font-size:20px}body:has(.membership-page) .hj-property-notice{flex-wrap:wrap;padding:12px}}
[data-theme=dark] body:has(.membership-page){background:#181c23}[data-theme=dark] .membership-page{color:#d5dce5}[data-theme=dark] .membership-card{background:#242a33}[data-theme=dark] .membership-price{background:#303846}[data-theme=dark] .membership-faq button:hover,[data-theme=dark] .membership-faq button[aria-expanded=true]{background:#2b3440}[data-theme=dark] .membership-guest{background:#4c3030;color:#ffb8b8}[data-theme=dark] body:has(.membership-page) .hj-footer{background:#181c23}
@media(prefers-reduced-motion:reduce){.membership-faq i{transition:none}}
/* Match reference list rhythm while allowing every active offer to wrap. */
.membership-info h2{margin-bottom:16px}
.membership-offers article{flex-basis:calc(50% - 12px)}
.membership-terms ul{padding-inline-start:20px;list-style-position:inside;line-height:24px}.membership-terms li{padding-right:20px;margin-bottom:4px}.membership-terms li:last-child{margin-bottom:0}
.membership-terms h2{margin-bottom:16px}
@media(max-width:767px){.membership-offers article{flex-basis:100%}.membership-terms h2{margin-bottom:16px}}
.membership-price{padding-block:10px}.membership-terms{padding-bottom:50px}
@media(min-width:768px) and (max-width:1023px){.membership-pricing{min-height:368px}}
@media(max-width:767px){.membership-terms{padding-bottom:30px}}
.membership-offers article{max-width:468px}[dir=ltr] .membership-back svg{transform:rotate(180deg)}
