/* Four membership tiers follow the supplied App screens; all dimensions use the inner screen width. */
.member-page{--accent:#00aaa6;--button:#05c7c4;--tint:#e9fffb;--line:#d6f3ed;--hero:#8bd8d3;--page:#f2f9f9;background:var(--page);color:#343434}
.member-page[data-tier=vip]{--accent:#0088ed;--button:#269bff;--tint:#edf6ff;--line:#ddebff;--hero:#91c5fa;--page:#edf4fc}
.member-page[data-tier=svip]{--accent:#8753ff;--button:#9564ff;--tint:#f7f0ff;--line:#edddff;--hero:#c99aff;--page:#f6efff}
.member-page[data-tier=ssvip]{--accent:#b46600;--button:#ff8f12;--tint:#fff8e9;--line:#ffe7ba;--hero:#ffce60;--page:#fff8e6}
.member-page .member-scroll{inset:0;padding:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
.member-page .member-scroll::-webkit-scrollbar{display:none}
.member-page .member-hero{position:relative;min-height:0;height:77cqw;padding:0;overflow:hidden;color:#333;background:linear-gradient(135deg,var(--hero),var(--tint));border-radius:0}
.member-page .app-status{height:13cqw;padding:3cqw 8cqw 0;display:flex;justify-content:space-between;font-size:4.3cqw;font-weight:700;color:#111}
.member-page .hero-nav{height:12cqw;display:flex;align-items:center;justify-content:space-between;padding:0 2cqw}
.member-page .hero-nav strong{font-size:4.6cqw;font-weight:600}
.member-page .icon-button{min-width:44px;min-height:44px;padding:0;background:none;color:#333;font-size:9cqw;line-height:1;display:grid;place-items:center}
.member-page .member-help{font-size:5cqw}
.member-page .member-mode-tabs{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:0;height:13cqw;padding:0 2cqw}
.member-page .member-mode-tab{position:relative;min-width:0;min-height:44px;background:none;border:0;border-radius:0;padding:0 1cqw 2cqw;color:#636d70;font-size:4cqw;white-space:nowrap;font-weight:500}
.member-page .member-mode-tab.is-active{color:var(--accent);font-weight:800}
.member-page .member-mode-tab.is-active::after{content:'';position:absolute;left:calc(50% - 3cqw);bottom:.6cqw;width:6cqw;height:.9cqw;border-radius:1cqw;background:var(--accent)}
.member-page .hero-content{position:relative;min-height:0;height:39cqw;padding:0 5cqw;display:flex;align-items:flex-start}
.member-page .hero-copy{position:relative;z-index:2;width:53%;padding-top:5cqw}
.member-page .hero-copy h2{margin:0;font-weight:700;font-family:inherit;font-size:5.8cqw;line-height:1.3;letter-spacing:0}
.member-page .hero-copy p{font-size:3.3cqw;color:#5b6670;line-height:1.6;margin:2cqw 0 3cqw;max-width:46cqw}
.member-page .member-status{display:inline-block;border:1px solid #ffffffbd;background:#ffffff35;border-radius:6cqw;padding:1.4cqw 3.5cqw;font-size:3.3cqw;color:var(--accent)}
.member-page .hero-badge{position:absolute;right:2cqw;bottom:0;width:43cqw;height:39cqw;object-fit:fill;mask-image:linear-gradient(to right,transparent,#000 7%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 8%);mask-composite:intersect}
.member-page .member-body{position:relative;z-index:1;margin-top:-4cqw;padding:0 3.2cqw;color:#353535}
.member-page .plan-section,.member-page .benefit-section,.member-page .welfare-section{background:#fff;border-radius:3.5cqw;box-shadow:none;padding:4.5cqw 3.2cqw}
.member-page h3{font-size:4.4cqw;font-weight:600;margin:0 0 5cqw;line-height:1.3}
.member-page .plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3cqw}
.member-page .plan-card{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;min-height:34cqw;padding:8cqw 1cqw 3cqw;border:1px solid var(--line);background:white;border-radius:3.2cqw;color:#444}
.member-page .plan-card.is-selected{border:2px solid var(--button);background:var(--tint)}
.member-page .plan-tag{position:absolute;top:-1px;left:14%;right:14%;padding:1cqw 0;background:var(--tint);border-radius:0 0 3cqw 3cqw;color:var(--accent);font-size:2.8cqw;white-space:nowrap}
.member-page .plan-card.is-selected .plan-tag{color:white;background:var(--button)}
.member-page .plan-card b{font-size:3.7cqw;font-weight:500;margin:0}
.member-page .plan-card strong{font-size:4.2cqw;white-space:nowrap;margin:4cqw 0}
.member-page .plan-card em{font-size:3cqw;font-style:normal;color:var(--accent);margin-top:auto}
.member-page .plan-card.is-selected b,.member-page .plan-card.is-selected strong{color:var(--accent)}
.member-page .renewal-row{display:block;width:100%;min-height:44px;padding:3cqw 0 0;border:0;background:none;color:#858585;font-size:2.8cqw;line-height:1.7;text-align:center}
.member-page .welfare-section,.member-page .benefit-section{margin-top:3.5cqw}
.member-page .welfare-heading,.member-page .benefit-heading{display:flex;align-items:center;justify-content:space-between;gap:2cqw;margin-bottom:4cqw}
.member-page .welfare-heading h3,.member-page .benefit-heading h3{margin:0;font-size:4.1cqw}
.member-page .welfare-heading>button{background:none;color:#777;font-size:2.8cqw;min-height:44px;margin:-3cqw 0}
.member-page .welfare-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2cqw}
.member-page .welfare-grid button{display:flex;flex-direction:column;align-items:center;gap:1cqw;min-width:0;padding:2cqw 0;border:1px solid var(--line);border-radius:2.5cqw;background:white;color:#777;font-size:2.6cqw}
.member-page .welfare-grid img{display:block;width:10cqw;height:10cqw;object-fit:contain}
.member-page .benefit-heading>span{font-size:2.9cqw;color:#999;white-space:nowrap}
.member-page .benefit-heading>span b{color:var(--accent)}
.member-page .benefit-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3cqw 2.5cqw}
.member-page .benefit-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:28cqw;padding:3.5cqw 1.5cqw 2cqw;border:1px solid var(--line);border-radius:2.7cqw;background:linear-gradient(var(--tint),white);text-align:center}
.member-page .benefit-icon{display:grid;place-items:center;width:11cqw;height:11cqw;margin-bottom:2.3cqw;background:none;color:var(--accent)}
.member-page .benefit-icon img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%}
.member-page .benefit-icon svg{width:9.5cqw;height:9.5cqw;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.member-page .benefit-item h4{margin:0;font-size:3.5cqw;font-weight:500;line-height:1.4}
.member-page .benefit-item p{margin:1.2cqw 0 0;font-size:2.9cqw;line-height:1.5;color:#909090}
.member-page .benefit-footnote{font-size:2.8cqw;line-height:1.7;color:#777;margin:4cqw 0 0;text-align:center}
.member-page .body-spacer{height:36cqw}
.member-page .purchase-bar{position:absolute;z-index:8;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1.12fr;align-items:center;gap:1cqw 2cqw;min-height:0;padding:4cqw 4cqw 7cqw;background:#fffffffa;border-top:1px solid #f3f3f3;box-shadow:0 -2cqw 6cqw #5144650d}
.member-page .purchase-meta span{display:block;font-size:3.1cqw;margin-bottom:2cqw;color:#444}
.member-page .purchase-meta strong{font-size:4.6cqw;color:var(--accent);font-weight:600}
.member-page .purchase-button{border:0;border-radius:9cqw;min-height:12cqw;background:linear-gradient(110deg,var(--button),var(--accent));color:#fff;font-size:4.2cqw;font-weight:700;box-shadow:none}
.member-page .purchase-button:disabled{opacity:.5}
.member-page .legal-links{display:flex;grid-column:1/-1;justify-content:center;align-items:center;gap:1.1cqw;color:#8b8b8b;margin-top:1cqw}
.member-page .legal-links button{min-height:28px;padding:0;background:none;color:inherit;font-size:2.5cqw}
.member-page .legal-links span{font-size:2.5cqw}
.member-page button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}