/* 2026-10-13: three tiers, compact membership card and swipeable privileges. */
.comparison-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.comparison-top{position:relative;padding:24px 23px;background:linear-gradient(120deg,#edf5ec,#d7e8e0)}
.comparison-top h2{font-family:Cormorant,Georgia,serif;font-size:40px;letter-spacing:.2px;margin:8px 0 0}
.comparison-top small{display:block;font-size:11px;letter-spacing:2px}
.comparison-state{display:inline-block;margin-bottom:18px;border:1px solid #a8b99d;border-radius:999px;padding:5px 10px;font-size:10px;color:#365d43;background:#fff6}
.comparison-card[data-tier=platinum] .comparison-top{background:linear-gradient(120deg,#fffbed,#ece5bd)}
.comparison-card[data-tier=diamond] .comparison-top{background:linear-gradient(120deg,#edfafd,#cce7e7)}
.comparison-card[data-tier=supreme] .comparison-top{background:linear-gradient(120deg,#fff2bb,#e6d18a)}
.comparison-list{padding:6px 23px 16px}
.comparison-list li{padding:18px 0;gap:14px;min-height:99px;align-items:center;border-color:#d7e0d1}
.comparison-list li:last-child{border:0}
.comparison-icon{color:#6b953f;width:32px;display:flex;justify-content:center;flex-shrink:0}
.comparison-icon svg{width:28px;height:28px;margin:0}
.comparison-content{min-width:0;flex:1;display:block}
.comparison-label{display:block;font-size:12px;font-weight:500;letter-spacing:.3px;color:#466248}
.comparison-content strong{display:flex;align-items:center;gap:7px;font-size:19px;font-weight:600;line-height:1.5;color:#163f29;margin-top:4px}
.comparison-content small{display:block;font-size:10px;color:#718368;margin-top:3px;line-height:1.6}
.unavailable-benefit .comparison-icon,.unavailable-benefit .comparison-content{opacity:.45}
.increase-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:22px;border-radius:6px;background:#e6f2dd;color:#4d972f;vertical-align:middle;margin-left:5px;flex-shrink:0}
.increase-badge svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;margin:0}
.benefit-tier-tabs{display:flex;gap:10px;margin:0 0 16px;flex-wrap:wrap}
.benefit-tier-tabs button{border:1px solid #b9c39f4d;border-radius:999px;padding:9px 19px;background:#ffffff08;color:#bdcbb7;font-size:12px;min-height:40px}
.benefit-tier-tabs button[aria-pressed=true]{background:#e5d3a5;color:#123b27;border-color:#f1e4c5;box-shadow:0 3px 13px #0002}
.swipe-hint{display:none;color:#abc0ac;font-size:10px;margin:0 0 15px;letter-spacing:.3px}
.catalog-note{color:#bacaaf;font-size:11px;line-height:1.8;margin:18px 3px 0}
.welcome-dialog{padding:39px 36px 30px;width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 32px);text-align:center;border:1px solid #e8d6ac;border-radius:25px;background:radial-gradient(ellipse at 50% 0%,#e6efe3,transparent 55%),linear-gradient(145deg,#fffdf5,#f5f7ee);box-shadow:0 28px 90px #001a1499,inset 0 0 0 5px #fff7;color:#173e2b;overflow:auto}
.welcome-dialog::backdrop{background:#001c16b0;backdrop-filter:blur(8px)}
.welcome-close{position:absolute;right:13px;top:11px;color:#6a806a;background:transparent;font-size:24px;width:40px;min-height:40px;border-radius:50%}
.welcome-close:hover{background:#dce9d94d}
.welcome-emblem{width:78px;height:78px;margin:4px auto 23px;border-radius:50%;display:grid;place-items:center;border:1px solid #ba9e64;background:#f8f8e9;box-shadow:0 0 0 7px #d9dcbe26,0 10px 20px #50765314}
.welcome-emblem img{width:54px;height:54px}
.welcome-dialog .eyebrow{font-size:8px;letter-spacing:2px;color:#9a865b;margin:0 0 15px}
.welcome-dialog h2{font-family:Cormorant,Georgia,serif;font-size:44px;line-height:1.15;margin:0;font-weight:500}
.welcome-dialog .welcome-name{font-size:23px;font-weight:500;color:#174c32;margin:13px 0 0;line-height:1.5;overflow-wrap:anywhere}
.welcome-divider{display:block;width:46px;height:1px;margin:24px auto;background:linear-gradient(90deg,transparent,#b39759,transparent)}
.welcome-dialog .welcome-copy{font-size:12px;color:#6e806c;line-height:2;margin:0 0 26px}
.welcome-dialog .primary-button{display:flex;align-items:center;justify-content:center;gap:15px;min-height:47px;width:100%;font-size:12px}
.welcome-dialog .primary-button svg{width:16px;height:16px}
.welcome-dialog>small{display:block;margin-top:22px;font-size:8px;letter-spacing:.8px;color:#8e987e}
@media(max-width:700px){
 .member-card{height:auto;min-height:0;aspect-ratio:85.6/53.98;padding:16px 18px;border-radius:16px}
 .card-top>span:first-child{font-size:8px;letter-spacing:2px}
 .active-badge{font-size:7px;padding:4px 7px}
 .card-title,.member-card[data-tier=pending] .card-title{position:absolute;left:18px;top:51px;margin:0;max-width:72%}
 .card-title h2{font-size:clamp(16px,5vw,21px);line-height:1.2;margin:0 0 7px;letter-spacing:.2px}
 .card-title p{font-size:clamp(23px,7.4vw,30px);line-height:1.25;letter-spacing:2px}
 .member-card[data-tier=pending] .card-title p{font-size:clamp(18px,5.5vw,23px);line-height:1.4;max-width:none;letter-spacing:.5px}
 .card-vip,.member-card[data-tier=pending] .card-vip{display:none}
 .gem{width:29%;height:auto;top:26%;right:4.5%}
 .card-curve{top:65%;height:41%;border-radius:50%}
 .card-bottom{left:18px;right:17px;bottom:14px}
 .member-name-label{display:none}
 .card-bottom #memberName{font-size:clamp(13px,4vw,16px);line-height:1.3}
 .card-bottom>div>span{font-size:7px;line-height:1.4;margin-top:4px;letter-spacing:0}
 .card-bottom img{width:25px;height:25px}
 .comparison-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:0;scrollbar-width:none;overscroll-behavior-x:contain;position:relative;padding:0 2px 12px;touch-action:pan-x pan-y}
 .comparison-grid::-webkit-scrollbar{display:none}
 .comparison-card{flex:0 0 calc(100% - 16px);min-width:0;scroll-snap-align:start;scroll-snap-stop:always;border-radius:20px}
 .comparison-top{padding:25px 24px}
 .comparison-top h2{font-size:42px}
 .comparison-list{padding:7px 25px 16px}
 .comparison-list li{min-height:100px;padding:18px 0;gap:17px}
 .comparison-label{font-size:13px}
 .comparison-content strong{font-size:21px}
 .comparison-content small{font-size:10px}
 .comparison-icon{width:36px}
 .comparison-icon svg{width:31px;height:31px}
 .benefit-tier-tabs{gap:7px;flex-wrap:nowrap}
 .benefit-tier-tabs button{flex:1;min-width:0;padding:9px 8px;font-size:11px}
 .swipe-hint{display:block}
 .page-intro h1{font-size:23px}
 .welcome-dialog{padding:33px 26px 25px;border-radius:23px}
 .welcome-emblem{width:71px;height:71px;margin-bottom:23px}
 .welcome-emblem img{width:49px;height:49px}
 .welcome-dialog h2{font-size:40px}
 .welcome-dialog .welcome-name{font-size:22px}
}
@media(max-width:360px){.member-card{padding:14px 16px}.card-title,.member-card[data-tier=pending] .card-title{left:16px;top:46px}.card-title p{font-size:24px}.member-card[data-tier=pending] .card-title p{font-size:18px}.card-bottom{left:16px;right:15px;bottom:12px}.card-title h2{font-size:16px}.comparison-list{padding-left:21px;padding-right:21px}.welcome-dialog{padding-left:22px;padding-right:22px}}
@media(prefers-reduced-motion:no-preference){.increase-badge svg{animation:benefitRise 1.8s ease-in-out infinite}.welcome-dialog[open]{animation:welcomeReveal .45s cubic-bezier(.2,.8,.2,1)}.welcome-emblem{animation:welcomeHalo 3.2s ease-in-out infinite}@keyframes benefitRise{0%,100%{transform:translateY(1px);opacity:.65}50%{transform:translateY(-2px);opacity:1}}@keyframes welcomeReveal{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}@keyframes welcomeHalo{0%,100%{box-shadow:0 0 0 7px #d9dcbe26,0 10px 20px #50765314}50%{box-shadow:0 0 0 10px #d9dcbe16,0 13px 24px #5076531d}}}
@media(prefers-reduced-motion:reduce){.increase-badge svg,.welcome-dialog,.welcome-emblem{animation:none!important}.comparison-grid{scroll-behavior:auto}}