.plans-main { max-width:1504px; margin:auto; padding:48px 32px 64px; }
.plans-heading { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:26px; }
.plans-heading h1 { font-size:38px; letter-spacing:.02em; }
.plans-heading p { color:var(--muted); line-height:1.8; margin-top:12px; max-width:740px; }
.plans-cycle { display:flex; gap:4px; flex:none; padding:5px; border:1px solid var(--line); border-radius:7px; background:var(--panel); }
.plans-cycle button { border:0; border-radius:4px; padding:11px 25px; font-weight:600; white-space:nowrap; background:transparent; color:var(--muted); }
.plans-cycle button[aria-selected=true] { color:var(--accent-text); background:var(--accent); }
.plans-newcomer { display:flex; align-items:center; gap:20px; padding:18px 22px; border:1px solid var(--line); border-radius:7px; background:var(--panel); margin-bottom:44px; }
.plans-newcomer .button { min-width:160px; }
.plans-newcomer p { font-size:14px; }
.plans-newcomer small { display:block; margin-top:4px; color:var(--muted); }
.plans-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; align-items:stretch; }
.membership-card { position:relative; display:flex; flex-direction:column; padding:26px 22px 22px; border:1px solid var(--line); border-radius:7px; background:var(--panel); min-width:0; }
.membership-card.featured { border-color:var(--accent); }
.membership-ribbon { position:absolute; left:-1px; right:-1px; top:-27px; height:27px; border-radius:7px 7px 0 0; display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; font-weight:600; color:var(--accent-text); background:var(--accent); }
.membership-card.featured { border-radius:0 0 7px 7px; }
.membership-name { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:30px; }
.membership-name h2 { font-size:19px; }
.membership-offer { font-size:11px; font-weight:500; padding:3px 7px; border-radius:4px; color:var(--accent-ink); background:var(--soft); }
.membership-price { display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; margin:25px 0 20px; min-height:49px; }
.membership-price .amount { font-size:38px; font-weight:700; line-height:1.2; }
.membership-price .currency { font-size:17px; font-weight:600; }
.membership-price .period { color:var(--muted); font-size:13px; }
.membership-price del { color:var(--muted); font-size:12px; margin-left:3px; }
.membership-card.featured .membership-price { color:var(--accent-ink); }
.membership-details { list-style:none; padding:0; margin:0 0 24px; color:var(--muted); line-height:1.9; min-height:106px; font-size:14px; }
.membership-details li { display:flex; align-items:baseline; gap:8px; }
.membership-details li::before { content:""; width:4px; height:4px; border-radius:50%; background:var(--line-strong); flex:none; align-self:center; }
.membership-buy { width:100%; min-height:46px; }
.membership-benefits { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; flex:1; }
.membership-benefits h3 { font-size:14px; margin-bottom:14px; }
.membership-benefits ul { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.membership-benefits li { display:flex; align-items:start; gap:9px; color:var(--muted); font-size:13px; line-height:1.7; }
.membership-benefits .account-icon { width:16px; height:16px; margin-top:3px; color:var(--accent-ink); }
.membership-hot { display:inline-block; font-size:9px; padding:0 4px; margin-left:5px; border:1px solid var(--line-strong); border-radius:3px; color:var(--accent-ink); vertical-align:middle; }
.membership-toggle { display:none; margin-top:14px; font-size:13px; }
.plans-message:not(:empty) { margin-bottom:18px; }
#plansMessage .notice { margin-bottom:20px; }
.plan-purchase-summary { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:20px; margin-bottom:20px; }
.plan-purchase-summary h3 { font-size:20px; margin-bottom:16px; }
.plan-purchase-summary dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 24px; margin:0; font-size:14px; }
.plan-purchase-summary dt { color:var(--muted); }
.plan-purchase-summary dd { text-align:right; margin:0; overflow-wrap:anywhere; }
.plan-purchase-summary .plan-price-row { border-top:1px solid var(--line); padding-top:14px; margin-top:14px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.plan-price-row strong { color:var(--accent-ink); font-size:26px; }
.plan-payment-options { border:0; padding:0; margin:0; }
.plan-payment-options legend { color:var(--muted); font-size:14px; margin-bottom:12px; }
.plan-payment-list { display:flex; gap:10px; flex-wrap:wrap; }
.plan-payment-option { border:1px solid var(--line); border-radius:5px; padding:12px 14px; cursor:pointer; display:flex; align-items:center; gap:4px; }
.plan-payment-option:has(input:checked) { border-color:var(--accent); background:var(--soft); color:var(--accent-ink); }
.plan-purchase-limit { color:var(--muted); font-size:13px; margin-top:14px; }
@media(max-width:1199px) { .plans-grid { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:48px; } .plans-heading { align-items:start; } .plans-cycle button { padding:11px 16px; } .membership-name { min-height:30px; } }
@media(max-width:760px) { .plans-main { padding:28px 20px 40px; } .plans-heading { flex-direction:column; gap:20px; } .plans-heading h1 { font-size:30px; } .plans-heading p br { display:none; } .plans-newcomer { gap:12px; padding:16px; flex-wrap:wrap; } .plans-cycle { width:100%; } .plans-cycle button { flex:1; } .membership-card { padding:23px 18px; } .membership-price .amount { font-size:34px; } }
@media(max-width:540px) { .plans-main { padding:26px 16px 36px; } .plans-grid { grid-template-columns:1fr; gap:42px; } .membership-details { min-height:0; } .membership-name { justify-content:space-between; } .membership-price { margin:20px 0 16px; } .membership-benefits:not(.expanded) li:nth-child(n+5) { display:none; } .membership-toggle { display:inline-flex; } .plan-purchase-summary dl { gap:10px; } .plan-price-row strong { font-size:22px; } }