body{margin:0;min-height:100dvh;background:#0b161d;color:#eef6f5;font-family:system-ui;padding:24px 14px;box-sizing:border-box}.member-panel{margin:auto;max-height:none;width:min(620px,100%)}h1{font-size:clamp(25px,6vw,32px);line-height:1.35}.payment-brand{color:#b4e8ac!important;letter-spacing:2px;font-size:12px;margin-top:26px!important}fieldset{border:0;margin:24px 0;padding:0;min-width:0}legend{font-weight:700}#subscriptionProducts label{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:8px;border:1px solid #38505b;border-radius:14px;padding:16px;background:#0b1a23;cursor:pointer}#subscriptionProducts label:has(input:checked){border-color:#88e3c6;background:#173b34}.member-panel #subscriptionProducts input[type=radio]{width:20px;height:20px;margin:2px 0;padding:0;grid-row:1 / span 2;accent-color:#88e3c6}#subscriptionProducts strong,#subscriptionProducts small{display:block;margin:0}#subscriptionSubmit{width:100%;margin-top:18px}#paymentHistory{margin-top:32px}#paymentStatus,#paymentResultStatus{white-space:pre-wrap;overflow-wrap:anywhere}#subscriptionSeller,#subscriptionRefund{white-space:pre-wrap}.member-panel a{overflow-wrap:anywhere}.payment-order{border:1px solid #38505b;border-radius:12px;padding:14px;margin:12px 0}.payment-order p{margin:6px 0}

#subscriptionStatus,#subscriptionResultStatus{white-space:pre-wrap;overflow-wrap:anywhere}.payment-order button{margin:8px 8px 0 0}#subscriptionPlans{margin:24px 0}

.payment-checkout main.member-panel{width:min(1060px,100%);max-height:none;overflow:visible;overscroll-behavior:auto;touch-action:auto;padding:clamp(18px,3vw,32px)}
.payment-intro{max-width:680px;margin-bottom:24px}
.payment-intro h1{margin:8px 0 12px}
.payment-intro>p:last-child{font-size:16px;line-height:1.8}
.payment-connection{padding:12px 15px;border-left:3px solid #88e3c6;background:#0b1b22;border-radius:0 10px 10px 0;overflow-wrap:anywhere}
.payment-benefits{margin:32px 0}
.payment-benefits h2,.payment-terms h2{font-size:23px;line-height:1.45}
.payment-section-intro{max-width:720px}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.plan-card{min-width:0;padding:22px 18px;display:flex;flex-direction:column;border:1px solid #38505b;border-radius:16px;background:#0b1a23;word-break:keep-all;overflow-wrap:anywhere}
.plan-category{font-size:12px;color:#9bc9ba;line-height:1.6}
.member-panel .plan-card h3{font-size:22px;margin:9px 0 0}
.member-panel .plan-price{color:#b6c8cb;margin:18px 0 10px;line-height:1.4}
.plan-price strong{font-size:clamp(27px,3.4vw,32px);font-weight:800;letter-spacing:-1px;color:#edf6f2;white-space:nowrap}
.plan-price span{font-size:13px;white-space:nowrap}
.member-panel .plan-summary{font-size:14px;line-height:1.8;margin:0 0 18px;color:#b9cdd0}
.plan-card ul{margin:0 0 24px;padding:0 0 0 19px;line-height:1.8;font-size:14px}
.plan-card li+li{margin-top:8px}
.member-panel .plan-cycle{margin:auto 0 0;padding-top:16px;border-top:1px solid #2b414b;font-size:12px;line-height:1.7;color:#acc7c1}
.plan-free-link{margin-top:auto;text-align:center}
.plan-card--premium{border-color:#b69c60;background:linear-gradient(150deg,#192d2a,#0d1a20)}
.plan-card--premium .plan-category{color:#dfcb93}
.plan-inline-note{display:inline-block;font-size:11px;border:1px solid #6b725d;border-radius:5px;padding:0 5px;line-height:1.8;color:#ddcd9c;vertical-align:middle}
.plan-feature-detail{display:block;margin-top:3px;font-size:12px;line-height:1.75;color:#a9c1c6}
.member-panel .payment-feature-note{font-size:13px;margin:16px 0 0;line-height:1.8}
.payment-terms{max-width:740px;border:1px solid #38505b;border-radius:14px;padding:20px;margin:30px 0;background:#102029;word-break:keep-all;overflow-wrap:anywhere}
.payment-terms dl{margin:12px 0 18px}
.payment-terms dl>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid #2d424b}
.payment-terms dt{font-weight:700;font-size:14px;color:#e3f2ed}
.payment-terms dd{margin:0;font-size:14px;line-height:1.8;color:#b5c9cd}
.payment-policy-links{display:flex;gap:10px 24px;flex-wrap:wrap;font-size:14px}
.payment-policy-links a{text-underline-offset:4px}
.payment-workspace{max-width:740px}
.payment-workspace>section{margin-top:30px}
.payment-workspace #subscriptionForm{margin-top:28px}
.payment-workspace #subscriptionForm>label{margin-top:18px;word-break:keep-all;overflow-wrap:anywhere}
.payment-workspace details{padding:12px 0;border-bottom:1px solid #38505b}
.payment-workspace details>p{line-height:1.8}
.member-panel #subscriptionProducts input[type=radio]{grid-row:1 / span 3}
.plan-selection-benefits{grid-column:2;font-size:13px;color:#adc6c7;line-height:1.75;margin-top:6px;word-break:keep-all;overflow-wrap:anywhere}
.payment-checkout .business-info{max-width:1060px;margin-left:auto;margin-right:auto}
@media(max-width:800px){.plan-grid{grid-template-columns:minmax(0,1fr)}.plan-card{padding:22px}.plan-price strong{font-size:32px}.payment-benefits h2,.payment-terms h2{font-size:22px}}
@media(max-width:440px){.payment-checkout{padding:16px 10px}.payment-checkout main.member-panel{padding:20px 15px}.plan-card{padding:20px 17px}.payment-terms{padding:17px 14px}.payment-terms dl>div{grid-template-columns:minmax(0,1fr);gap:5px}}

.benefit-overview {
  --benefit-surface: #0e1d26;
  --benefit-rule: #38505b;
  --benefit-muted: #b6c9ce;
  --benefit-ice: #b4e1f2;
  --benefit-mint: #a5e4c9;
  --benefit-gold: #f0d598;
}

.benefit-overview .payment-intro {
  margin-bottom: clamp(16px, 3vw, 28px);
}

.benefit-overview .payment-intro h1 {
  margin: 8px 0;
  font-size: clamp(26px, 4.5vw, 42px);
  letter-spacing: -.035em;
}

.benefit-overview .payment-intro .benefit-lede {
  margin: 0;
  color: var(--benefit-muted);
  font-size: clamp(14px, 2vw, 17px);
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.benefit-overview .benefit-quick-grid,
.benefit-overview #subscriptionPlans.benefit-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 1.6vw, 16px);
  margin: 0 0 clamp(20px, 4vw, 38px);
}

.benefit-overview .benefit-quick-card {
  --tier-color: var(--benefit-ice);
  min-width: 0;
  padding: clamp(12px, 2.2vw, 24px);
  background: var(--benefit-surface);
  border: 1px solid var(--benefit-rule);
  border-top: 3px solid var(--tier-color);
  border-radius: 12px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.benefit-overview .benefit-quick-card[data-plan="light"] {
  --tier-color: var(--benefit-mint);
  background: #10251f;
}

.benefit-overview .benefit-quick-card[data-plan="premium"] {
  --tier-color: var(--benefit-gold);
  background: #24251f;
}

.benefit-overview .benefit-tier {
  display: inline-block;
  color: var(--tier-color, var(--benefit-ice));
  font-size: clamp(10px, 1.4vw, 12px);
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1.3;
}

.benefit-overview .benefit-quick-card h2,
.benefit-overview .benefit-quick-card h3 {
  margin: 3px 0 0;
  font-size: clamp(16px, 2.8vw, 26px);
  line-height: 1.35;
  letter-spacing: -.035em;
}

.benefit-overview .benefit-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 .35em;
  margin: 7px 0 3px;
  font-size: clamp(11px, 1.6vw, 14px);
  line-height: 1.45;
}

.benefit-overview .benefit-price strong {
  color: var(--mp-text);
  font-size: clamp(17px, 3vw, 30px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.benefit-overview .benefit-card-summary {
  margin: 5px 0 0;
  color: var(--benefit-muted);
  font-size: clamp(11px, 1.7vw, 14px);
  line-height: 1.5;
}

.benefit-overview .benefit-matrix-section {
  margin: clamp(20px, 4vw, 38px) 0;
}

.benefit-overview .benefit-matrix-section > h2 {
  font-size: clamp(21px, 3vw, 29px);
  line-height: 1.4;
  letter-spacing: -.035em;
}

.benefit-overview .benefit-matrix-wrap {
  margin-top: 12px;
  border: 1px solid var(--benefit-rule);
  border-radius: 14px;
  background: var(--benefit-surface);
}

.benefit-overview .benefit-matrix {
  width: 100%;
  table-layout: fixed;
  font-size: clamp(12px, 1.8vw, 15px);
  font-variant-numeric: tabular-nums;
}

.benefit-overview .benefit-matrix th,
.benefit-overview .benefit-matrix td {
  padding: clamp(8px, 1.7vw, 14px) clamp(4px, 1.8vw, 16px);
  text-align: center;
  vertical-align: middle;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.benefit-overview .benefit-matrix thead th {
  background: #1b333f;
  color: var(--benefit-ice);
}

.benefit-overview .benefit-matrix thead th:nth-child(3) {
  color: var(--benefit-mint);
}

.benefit-overview .benefit-matrix thead th:last-child {
  border-top-right-radius: 13px;
  color: var(--benefit-gold);
}

.benefit-overview .benefit-matrix thead th:first-child {
  width: 40%;
  border-top-left-radius: 13px;
  color: var(--mp-text);
}

.benefit-overview .benefit-matrix th:first-child {
  padding-left: clamp(9px, 2vw, 18px);
  text-align: left;
}

.benefit-overview .benefit-matrix tbody th[scope="row"] {
  font-weight: 650;
}

.benefit-overview .benefit-matrix .benefit-matrix-group th {
  background: #172c36;
  color: #c5dce3;
  font-size: .9em;
  letter-spacing: .025em;
}

.benefit-overview .benefit-matrix tbody:last-child tr:last-child > * {
  border-bottom: 0;
}

.benefit-overview .benefit-available {
  color: var(--benefit-mint);
  font-weight: 750;
}

.benefit-overview .benefit-unavailable {
  color: #9cafb6;
}

.benefit-overview .benefit-quota {
  display: inline-block;
  padding: 3px clamp(4px, 1vw, 10px);
  border: 1px solid #497265;
  border-radius: 7px;
  background: #1c3733;
  color: #d7f5e7;
  font-weight: 750;
  line-height: 1.3;
}

.benefit-overview td:last-child .benefit-quota {
  border-color: #756744;
  background: #3a3423;
  color: #f5d995;
}

.benefit-overview .benefit-feature-detail {
  display: block;
  margin-top: 3px;
  color: var(--benefit-muted);
  font-size: .86em;
  font-weight: 400;
}

.benefit-overview .benefit-footnotes {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--benefit-rule);
  color: var(--benefit-muted);
  font-size: 13px;
  line-height: 1.65;
}

.benefit-overview .benefit-footnotes p {
  margin: 0;
}

.benefit-overview .benefit-footnotes p + p {
  margin-top: 6px;
}

.benefit-overview .benefit-purchase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
  margin: 16px 0 30px;
}

.benefit-overview .benefit-purchase-grid .payment-terms {
  margin: 0;
}

.benefit-overview .benefit-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.benefit-overview a:focus-visible,
.benefit-overview summary:focus-visible {
  outline: 2px solid var(--benefit-mint);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .benefit-overview .benefit-purchase-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 440px) {
  .benefit-overview .benefit-quick-card {
    padding: 9px 7px;
  }

  .benefit-overview .benefit-tier {
    letter-spacing: .035em;
  }
}