:root {
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:#17191d;
  background:#f4f5f6;
  font-synthesis:none;
  --green:#12634d;
  --muted:#60676b;
  --line:#dce1df;
  --paper:#fff;
  --soft:#eaf2ed
}
[hidden] { display: none !important; }
.header .brand { min-width: 0; flex-shrink: 1; }
.brand-text { min-width: 0; }
#brand-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.product-body { min-width: 0; flex: 1; }
.product-name, .hero h1, .hero-copy, .summary li, details p, .prose p { overflow-wrap: anywhere; }
.footer-brand { white-space: normal !important; overflow-wrap: anywhere; }
@media(max-width:760px) { #brand-name { max-width: 100px; } }
select, textarea {
  font: inherit;
  width: 100%;
  padding: 12px;
  border: 1px solid #cad3cd;
  border-radius: 8px;
  background: #fff;
  color: #17191d;
  font-size: 13px;
}
textarea {
  resize: vertical;
  overflow-wrap: anywhere;
}
.payment-qr {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px 0;
}
.order-callout #refresh-order {
  margin-top: 20px;
}
.refund-note {
  padding: 20px 0;
  font-size: 13px;
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  -webkit-font-smoothing:antialiased
}
button,input {
  font:inherit
}
button,a,input,summary {
  touch-action:manipulation
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit;
  text-decoration:none
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.55
}
button {
  transition:transform .14s,background-color .14s,border-color .14s
}
button:active:not(:disabled) {
  transform:scale(.98)
}
:focus-visible {
  outline:3px solid #398970;
  outline-offset:4px
}
h1,h2,h3,p {
  margin:0
}
h1,h2 {
  letter-spacing:-.035em;
  text-wrap:balance
}
p {
  line-height:1.8;
  text-wrap:pretty
}
.skip {
  position:fixed;
  left:12px;
  top:-80px;
  z-index:10;
  background:var(--green);
  color:white;
  padding:12px
}
.skip:focus {
  top:12px
}
.header {
  min-height:80px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:40px;
  padding:0 max(28px,calc((100vw - 1180px)/2));
  background:#f4f5f6
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:23px;
  font-weight:720;
  letter-spacing:-.04em;
  flex-shrink:0
}
.brand-mark {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  background:var(--green);
  color:#f5faf7;
  font-size:23px;
  border-radius:10px
}
.brand-caption {
  display:block;
  font-size:8px;
  font-weight:600;
  letter-spacing:.15em;
  margin-top:3px;
  color:var(--muted)
}
nav {
  display:flex;
  gap:6px
}
nav a {
  padding:12px 15px;
  font-size:13px;
  color:var(--muted);
  border-radius:8px
}
nav a[aria-current] {
  background:#e7ebe9;
  color:var(--green);
  font-weight:650
}
.header-note {
  margin-left:auto;
  color:var(--muted);
  font-size:12px
}
main {
  max-width:1180px;
  margin:auto;
  padding:0 0 60px;
  min-height:70vh
}
.notice {
  margin-top:22px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:#646b66;
  padding:11px 15px;
  background:#edf0ec;
  border:1px solid #dce3db;
  border-radius:8px;
  line-height:1.6
}
.status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#6e906f;
  flex-shrink:0
}
.hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  padding:67px 0 64px
}
.eyebrow {
  font-size:10px;
  font-weight:650;
  letter-spacing:.14em;
  color:var(--muted);
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:8px
}
.little-line {
  width:20px;
  height:2px;
  background:var(--green)
}
h1 {
  font-size:60px;
  font-weight:650;
  line-height:1.17
}
.green {
  color:var(--green)
}
.hero-copy {
  margin-top:22px;
  color:var(--muted);
  font-size:15px;
  line-height:1.9
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:24px;
  margin-top:25px;
  color:var(--green);
  font-size:13px;
  font-weight:650;
  min-height:44px
}
.membership-art {
  height:305px;
  border:1px solid #d4ddd5;
  border-radius:16px;
  background:#e4ece5;
  padding:27px 30px;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.art-label {
  font-size:9px;
  letter-spacing:.16em;
  color:#667e6d
}
.membership-card {
  background:#143e32;
  color:#eef4ed;
  padding:25px 27px;
  border-radius:12px;
  transform:rotate(-5deg);
  border:1px solid #34594a;
  box-shadow:0 16px 22px #1238271a;
  width:95%;
  margin:15px auto
}
.member-top {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:8px;
  letter-spacing:.13em;
  line-height:1.6
}
.member-top b {
  font-size:21px;
  letter-spacing:-.02em;
  font-weight:500
}
.member-icon {
  font-size:38px;
  color:#bdd8b5
}
.member-symbol {
  margin-left:auto;
  font-size:24px;
  color:#acc8b3
}
.member-bottom {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding-top:37px;
  font-size:11px;
  line-height:1.7;
  color:#c0d3c6
}
.member-bottom b {
  font-size:9px;
  font-weight:400;
  letter-spacing:.03em
}
.member-pill {
  font-size:8px;
  letter-spacing:.1em;
  border:1px solid #60836d;
  padding:4px 8px;
  border-radius:4px
}
.art-bottom {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:#687f6c;
  gap:8px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:26px
}
.section-heading .eyebrow {
  margin-bottom:10px
}
h2 {
  font-size:26px;
  font-weight:650;
  line-height:1.5
}
.subtle {
  color:var(--muted);
  font-size:12px;
  line-height:1.8
}
.purchase-layout {
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:25px
}
.products {
  display:flex;
  flex-direction:column;
  gap:12px
}
.product {
  display:flex;
  align-items:center;
  text-align:left;
  gap:19px;
  padding:25px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  color:inherit;
  min-height:108px
}
.product.selected {
  border-color:#478e73;
  background:#f5faf6;
  box-shadow:inset 0 0 0 1px #478e73
}
.product-icon {
  font-size:27px;
  background:#eff2ef;
  border-radius:10px;
  height:45px;
  width:45px;
  display:grid;
  place-items:center;
  color:#395448;
  flex-shrink:0
}
.product-name {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:17px;
  font-weight:600;
  flex-wrap:wrap
}
.tag {
  font-size:9px;
  background:#e4efe5;
  color:#386343;
  padding:3px 6px;
  border-radius:4px;
  font-weight:500
}
.product-desc {
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:9px
}
.product-price {
  margin-left:auto;
  font-size:23px;
  font-weight:600;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap
}
.product-price small {
  display:block;
  font-size:10px;
  color:var(--muted);
  font-weight:400;
  letter-spacing:0;
  margin-top:7px
}
.radio-mark {
  height:17px;
  width:17px;
  flex-shrink:0;
  border:1px solid #b7c2bc;
  border-radius:50%;
  position:relative
}
.selected .radio-mark {
  border:5px solid var(--green)
}
.catalog-note {
  font-size:11px;
  color:var(--muted);
  padding:8px 3px
}
.summary {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:27px 30px;
  align-self:start
}
.summary-label {
  font-size:11px;
  color:var(--muted);
  display:flex;
  justify-content:space-between
}
.summary-label span {
  font-size:18px
}
.summary h3 {
  font-size:23px;
  letter-spacing:-.025em;
  margin:18px 0 6px;
  font-weight:600
}
.summary ul {
  list-style:none;
  padding:20px 0;
  margin:0;
  display:grid;
  gap:13px;
  font-size:12px;
  color:#47544c
}
.summary li {
  display:flex;
  gap:10px;
  line-height:1.7
}
.summary li span {
  color:var(--green)
}
.total {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding:20px 0;
  font-size:12px;
  color:var(--muted)
}
.total strong {
  font-size:28px;
  color:#17191d;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums
}
.primary,.secondary {
  border-radius:8px;
  border:1px solid var(--green);
  background:var(--green);
  color:#f4faf6;
  font-size:13px;
  padding:13px 20px;
  font-weight:600;
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px
}
.full {
  width:100%;
  justify-content:space-between
}
.secondary {
  background:#f4f6f4;
  color:var(--green);
  border-color:var(--line)
}
.summary-note {
  text-align:center;
  margin-top:12px;
  font-size:10px;
  color:var(--muted)
}
.how {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:50px;
  margin-top:65px;
  padding:35px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.how h2,.faq-section h2 {
  font-size:24px
}
.how .eyebrow {
  margin-bottom:12px
}
.how ol {
  display:flex;
  gap:28px;
  list-style:none;
  margin:0;
  padding:8px 0
}
.how li {
  flex:1
}
.how li>span {
  display:block;
  font-size:11px;
  color:#779084;
  margin-bottom:20px;
  font-variant-numeric:tabular-nums
}
.how h3 {
  font-size:13px;
  font-weight:650;
  line-height:1.8;
  margin-bottom:8px
}
.how p {
  font-size:12px;
  color:var(--muted)
}
.faq-section {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:50px;
  padding-top:55px
}
.faq-section .eyebrow {
  margin-bottom:12px
}
details {
  border-bottom:1px solid var(--line)
}
summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  cursor:pointer;
  font-size:13px;
  font-weight:550;
  padding:20px 0;
  min-height:55px;
  line-height:1.7
}
summary::-webkit-details-marker {
  display:none
}
summary span {
  font-size:19px;
  font-weight:400;
  color:var(--muted)
}
details[open] summary span {
  transform:rotate(45deg)
}
details p {
  font-size:13px;
  color:var(--muted);
  padding-bottom:22px;
  max-width:60ch
}
footer {
  border-top:1px solid var(--line);
  padding:25px max(28px,calc((100vw - 1180px)/2));
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:11px;
  color:var(--muted);
  line-height:1.8
}
.footer-brand {
  font-size:15px;
  font-weight:650;
  color:#375745;
  white-space:nowrap
}
.footer-brand span {
  font-size:10px;
  font-weight:400;
  color:var(--muted);
  margin-left:14px
}
footer>div {
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap
}
dialog {
  width:440px;
  max-width:calc(100% - 32px);
  border:1px solid var(--line);
  border-radius:16px;
  padding:25px;
  box-shadow:0 20px 90px #15271e30;
  max-height:90vh;
  overflow:auto
}
dialog::backdrop {
  background:#13251a65
}
.dialog-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted);
  margin-bottom:20px
}
.icon-button {
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:26px;
  min-width:44px;
  min-height:44px
}
.checkout-price {
  font-size:18px;
  font-variant-numeric:tabular-nums;
  margin:15px 0 25px;
  color:var(--green)
}
label {
  display:block;
  font-size:12px;
  font-weight:600;
  margin:20px 0 10px
}
input:not([type=checkbox]) {
  border:1px solid #cad3cd;
  border-radius:8px;
  background:#f8faf8;
  padding:13px;
  min-height:46px;
  width:100%;
  font-size:13px;
  color:#17191d
}
.field-note,.dialog-note {
  font-size:11px;
  color:var(--muted);
  margin-top:10px
}
.consent {
  display:flex;
  align-items:flex-start;
  gap:9px;
  line-height:1.9;
  font-size:11px;
  color:var(--muted);
  font-weight:400
}
.consent input {
  margin-top:4px;
  accent-color:var(--green);
  width:16px;
  height:16px;
  flex-shrink:0
}
.consent a {
  text-decoration:underline;
  color:var(--green)
}
.error {
  font-size:12px;
  color:#a43428;
  min-height:18px;
  margin:10px 0
}
.dialog-note {
  text-align:center
}
.page-head {
  padding:65px 0 40px
}
.page-head h1 {
  font-size:42px
}
.page-head p:last-child {
  color:var(--muted);
  font-size:14px;
  margin-top:18px
}
.orders-layout {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:25px
}
.panel {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:30px
}
.panel h2 {
  font-size:22px;
  margin-bottom:15px
}
.empty {
  text-align:center;
  padding:45px 20px
}
.empty>span {
  font-size:30px;
  color:var(--green)
}
.empty h3 {
  font-size:17px;
  margin:15px 0 10px
}
.empty p {
  font-size:13px;
  color:var(--muted);
  margin-bottom:20px
}
.recent-order {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 0;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:12px;
  color:var(--green)
}
.recent-order b {
  display:block;
  color:#17191d;
  font-size:15px;
  font-weight:600
}
.recent-order small {
  display:block;
  font-size:10px;
  margin-top:9px;
  color:var(--muted)
}
#lookup-form .primary {
  margin-top:24px
}
.order-detail {
  margin-top:25px
}
.state-tag {
  font-size:12px;
  background:var(--soft);
  color:var(--green);
  border-radius:5px;
  padding:8px 12px
}
.progress {
  list-style:none;
  padding:25px 0;
  display:flex;
  gap:25px
}
.progress li {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted)
}
.progress li>span {
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#edf0ed
}
.progress li.complete {
  color:var(--green)
}
.progress li.complete>span {
  background:#dfeee5
}
.order-callout {
  background:#f3f7f3;
  padding:25px;
  border-radius:8px
}
.order-callout h3 {
  font-size:16px
}
.order-callout p {
  font-size:13px;
  color:var(--muted);
  margin:10px 0 15px
}
.recovery {
  border-bottom:0;
  margin-top:10px
}
.recovery code {
  display:block;
  overflow-wrap:anywhere;
  font-size:12px;
  background:#f5f7f5;
  padding:12px;
  border-radius:6px
}
.prose {
  max-width:800px
}
.prose h2 {
  margin:20px 0 10px
}
.prose p {
  font-size:14px;
  color:var(--muted)
}
.loading {
  text-align:center;
  padding:100px 20px;
  color:var(--muted)
}
@media(hover:hover) {
  nav a:hover {
    background:#e9eeeb;
    color:var(--green)
  }
  .primary:hover {
    background:#0c503c
  }
  .product:hover {
    border-color:#7a9e87
  }
  .recent-order:hover {
    background:#f7faf7
  }
  .text-link:hover {
    text-decoration:underline
  }
}
@media(max-width:1236px) {
  main {
    margin:0 28px
  }
  .hero {
    gap:50px
  }
  h1 {
    font-size:54px
  }
}
@media(max-width:900px) {
  .header {
    gap:20px
  }
  .header-note {
    display:none
  }
  .product {
    gap:12px;
    padding:20px
  }
  .product-name {
    font-size:15px
  }
  .product-price {
    font-size:20px
  }
  .summary {
    padding:25px 20px
  }
  .hero {
    gap:30px
  }
  h1 {
    font-size:48px
  }
  .membership-art {
    padding:22px
  }
  .product-icon {
    display:none
  }
  .how,.faq-section {
    grid-template-columns:1fr 1.7fr;
    gap:25px
  }
  .how ol {
    gap:15px
  }
  footer {
    flex-wrap:wrap
  }
}
@media(max-width:760px) {
  main {
    margin:0 18px;
    padding-bottom:35px
  }
  .header {
    padding:14px 18px;
    min-height:74px;
    gap:16px;
    justify-content:space-between
  }
  .brand {
    font-size:19px;
    gap:8px
  }
  .brand-mark {
    width:32px;
    height:34px;
    font-size:21px
  }
  .brand-caption {
    font-size:6px
  }
  nav {
    gap:0
  }
  nav a {
    padding:12px 9px;
    font-size:11px
  }
  .notice {
    margin-top:16px;
    font-size:10px;
    padding:9px 11px
  }
  .hero {
    grid-template-columns:1fr;
    padding:39px 0 40px;
    gap:28px
  }
  h1 {
    font-size:48px
  }
  .hero .eyebrow {
    font-size:9px;
    margin-bottom:18px
  }
  .hero-copy {
    font-size:14px;
    margin-top:18px
  }
  .text-link {
    margin-top:16px
  }
  .membership-art {
    height:240px;
    padding:20px 23px;
    max-width:520px
  }
  .membership-card {
    padding:19px 23px;
    width:90%;
    margin:10px auto
  }
  .member-bottom {
    padding-top:24px
  }
  .art-label,.art-bottom {
    font-size:8px
  }
  .section-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    margin-bottom:20px
  }
  h2 {
    font-size:22px
  }
  .purchase-layout {
    grid-template-columns:1fr;
    gap:14px
  }
  .product {
    padding:20px 17px;
    gap:13px;
    min-height:98px
  }
  .product-icon {
    display:grid;
    width:36px;
    height:36px;
    font-size:23px
  }
  .product-price {
    font-size:21px
  }
  .product-name {
    font-size:14px
  }
  .tag {
    font-size:8px
  }
  .product-desc {
    font-size:10px
  }
  .radio-mark {
    width:15px;
    height:15px
  }
  .product-price small {
    font-size:9px
  }
  .summary {
    padding:25px
  }
  .summary h3 {
    font-size:23px
  }
  .how {
    grid-template-columns:1fr;
    padding:28px 0;
    gap:20px;
    margin-top:38px
  }
  .how h2 br {
    display:none
  }
  .how ol {
    gap:14px
  }
  .how h3 {
    font-size:12px
  }
  .how p {
    font-size:11px
  }
  .how li>span {
    margin-bottom:12px
  }
  .faq-section {
    grid-template-columns:1fr;
    gap:20px;
    padding-top:35px
  }
  .faq-section h2 br {
    display:none
  }
  .faq-section .text-link {
    margin-top:9px
  }
  .faq-section summary {
    font-size:12px
  }
  footer {
    padding:22px 18px;
    gap:14px
  }
  footer>div {
    font-size:10px;
    gap:14px
  }
  .footer-brand span {
    font-size:10px
  }
  .page-head {
    padding:40px 0 30px
  }
  .page-head h1 {
    font-size:36px
  }
  .orders-layout {
    grid-template-columns:1fr
  }
  .panel {
    padding:23px
  }
  .progress {
    gap:12px;
    flex-wrap:wrap
  }
  .progress li {
    font-size:11px
  }
  .order-callout {
    padding:20px
  }
  .prose h2 {
    font-size:20px
  }
}
@media(max-width:380px) {
  .brand-caption {
    display:none
  }
  .header {
    gap:7px
  }
  .product-icon {
    display:none
  }
  .hero h1 {
    font-size:44px
  }
  .member-pill {
    font-size:7px
  }
  .art-bottom {
    font-size:7px
  }
  .footer-brand span {
    margin-left:8px
  }
  .tag {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    scroll-behavior:auto!important
  }
}

/* Reference storefront: compact navigation, dotted banner and a four-column resource hall. */
:root { color:#17201a; background:#f3f5f3; --green:#147a3a; --muted:#5d685f; --line:#dce3dc; --soft:#e8ede8; }
html { scroll-behavior:smooth; }
.header { min-height:64px; padding:12px 32px; justify-content:flex-start; gap:30px; }
.brand { font-size:21px; gap:10px; }
.brand-mark { width:26px; height:30px; background:transparent; color:var(--green); font-size:26px; border-radius:0; }
.brand-caption { display:none; }
.header nav { padding:3px; background:#e6ebe6; border-radius:999px; gap:2px; }
.header nav a { padding:8px 17px; font-size:13px; border-radius:999px; }
.header nav a[aria-current=page] { background:#fff; color:var(--foreground,#17201a); box-shadow:0 1px 3px #17201a12; }
.header-note { margin-left:auto; font-size:12px; color:var(--muted); }
main { max-width:1536px; margin:0 auto; padding:32px 32px 40px; min-height:calc(100vh - 138px); }
.club-hero { min-height:315px; display:grid; grid-template-columns:1.2fr 1fr; align-items:center; padding:44px; border:1px solid #e5eae5; border-radius:20px; background-color:#fff; background-image:radial-gradient(#b5d2bb65 .8px,transparent .8px); background-size:18px 18px; box-shadow:0 2px 4px #17201a06; gap:36px; overflow:hidden; }
.club-hero-copy h1 { font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC",serif; font-weight:700; font-size:46px; line-height:1.25; letter-spacing:-.045em; color:#1e2721; }
.club-hero-copy p { margin:20px 0 24px; font-size:14px; color:var(--muted); line-height:1.9; max-width:52ch; }
.hero-guide { display:inline-flex; align-items:center; gap:12px; padding:5px 7px 5px 5px; background:#fff; border:1px solid var(--line); border-radius:999px; box-shadow:0 3px 6px #17201a0b; font-size:12px; font-weight:600; }
.hero-guide>span { display:grid; place-items:center; background:var(--green); color:white; width:32px; height:32px; border-radius:50%; font-size:12px; }
.hero-guide small { font-size:11px; font-weight:400; background:#f0f3f0; border-radius:99px; padding:8px 12px; color:var(--muted); }
.club-hero-wordmark { text-align:center; padding:35px 20px; }
.club-hero-wordmark p { letter-spacing:.2em; font-size:9px; color:#76897a; }
.club-hero-wordmark strong { display:block; font-family:"Kaiti SC","STKaiti","Songti SC",serif; font-size:100px; line-height:1.3; letter-spacing:-.04em; margin:6px 0; color:#324839; }
.club-hero-wordmark strong span { color:#147a3a; font-family:Georgia,serif; font-size:60px; }
.club-hero-wordmark div { color:#79897e; font-size:16px; letter-spacing:.1em; }
.club-hero-wordmark small { display:block; margin-top:12px; font-size:9px; letter-spacing:.23em; color:#8b978e; }
.resource-hall { margin-top:56px; }
.hall-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.hall-heading>div:first-child { display:flex; align-items:baseline; gap:12px; }
.hall-heading h2 { font-size:24px; font-weight:650; letter-spacing:-.03em; }
.hall-heading span,.hall-heading>a { font-size:12px; color:var(--muted); }
.view-switch { display:flex; gap:2px; background:#e8ede8; border-radius:12px; padding:3px; }
.view-switch button { background:transparent; border:0; border-radius:9px; height:30px; width:32px; color:var(--muted); font-size:17px; }
.view-switch button[aria-pressed=true] { background:white; box-shadow:0 1px 4px #17201a12; color:#17201a; }
.offer-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.offer-card { position:relative; border:1px solid var(--line); border-radius:16px; background:white; padding:20px; min-height:210px; box-shadow:0 2px 4px #17201a06; overflow:hidden; }
.offer-heading { display:flex; align-items:center; gap:7px; position:relative; z-index:1; }
.offer-heading h3 { font-size:16px; font-weight:650; overflow-wrap:anywhere; min-width:0; }
.offer-symbol { font-size:24px; color:#273d2e; flex-shrink:0; }
.offer-tag { font-size:9px; padding:3px 6px; border:1px solid #c8ddcd; border-radius:999px; color:var(--green); margin-left:auto; white-space:nowrap; }
.offer-caption { font-size:11px; color:var(--muted); margin:8px 0 44px; max-width:65%; line-height:1.7; overflow-wrap:anywhere; }
.offer-bottom { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.offer-bottom strong { font-size:24px; font-weight:650; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.offer-bottom p>span { font-size:11px; color:var(--muted); }
.offer-buy { display:grid; place-items:center; width:34px; height:34px; border:1px solid #d3dfd5; border-radius:50%; color:var(--green); background:#f6f9f6; font-size:19px; }
.offer-features { position:relative; z-index:1; border-bottom:0; margin-top:10px; }
.offer-features summary { min-height:26px; padding:3px 0; font-size:11px; color:var(--muted); }
.offer-features summary span { font-size:15px; }
.offer-features ul { padding:8px 0 0; margin:0; list-style:none; color:var(--muted); font-size:11px; line-height:1.8; display:grid; gap:5px; overflow-wrap:anywhere; }
.plan-art { position:absolute; right:19px; top:63px; width:94px; height:73px; border:1px solid #e4e9e5; border-radius:5px; background:#fff; box-shadow:-6px 6px 0 #f3f5f3,0 6px 12px #17201a0c; padding:8px; color:#536459; transform:rotate(2deg); pointer-events:none; }
.plan-art small { font-size:5px; letter-spacing:.08em; display:block; color:#8d9990; }
.plus-art span { font:700 22px/1 Georgia,serif; display:inline-block; }
.plus-art small { display:inline; margin-left:3px; font-size:4px; }
.plus-art i { display:block; height:2px; background:#dce3dc; margin-top:5px; width:82%; }
.plus-art i:nth-last-child(2) { width:58%; }
.plan-art b { position:absolute; bottom:6px; right:8px; color:var(--green); font-size:11px; }
.code-art { transform:rotate(-2deg); }
.code-art code { display:block; margin-top:8px; font-size:5px; line-height:2; }
.code-art em { font-style:normal; color:#b0bdb4; margin-right:5px; }
.type-art strong { display:block; font:650 34px/1.25 Georgia,serif; }
.type-art span { font-size:5px; }
.weekly-art strong { display:block; font:700 13px/1.1 Georgia,serif; margin-top:6px; }
.weekly-art i { display:block; height:3px; background:#b9d6c0; width:42px; margin-top:5px; }
.weekly-art span { font-size:5px; }
.offer-grid.list-view { grid-template-columns:1fr; }
.list-view .offer-card { min-height:0; display:grid; grid-template-columns:1fr 1fr 200px; gap:16px; align-items:center; }
.list-view .offer-caption { margin:0; max-width:none; }
.list-view .plan-art { display:none; }
.list-view .offer-features { grid-column:1/-1; margin-top:0; }
.purchase-guide { margin-top:28px; padding:23px 26px; border:1px solid var(--line); border-radius:16px; display:flex; align-items:center; gap:40px; background:#ffffff80; }
.guide-title { min-width:140px; }
.guide-title h2 { font-size:16px; }
.guide-title a { display:block; font-size:11px; color:var(--muted); margin-top:6px; }
.purchase-guide ol { display:flex; justify-content:space-between; gap:32px; list-style:none; padding:0; margin:0; width:100%; }
.purchase-guide li { display:flex; align-items:center; gap:12px; }
.purchase-guide li>span { width:22px; height:22px; display:grid; place-items:center; border:1px solid #9bb9a3; border-radius:50%; font-size:12px; color:var(--green); flex-shrink:0; }
.purchase-guide h3 { font-size:13px; font-weight:500; }
.purchase-guide p { font-size:11px; color:var(--muted); margin-top:5px; line-height:1.8; }
.payment-methods { display:flex; align-items:center; gap:9px; padding:30px 0; font-size:12px; }
.payment-methods>span:first-child { color:var(--muted); margin-right:5px; }
.alipay-mark { color:#fff; background:#1677ff; font-size:12px; line-height:18px; width:18px; height:18px; text-align:center; border-radius:3px; }
.payment-methods small { color:var(--muted); margin-left:auto; font-size:11px; }
.club-faq { border-top:1px solid var(--line); padding-top:30px; }
.club-faq-list { display:grid; grid-template-columns:1fr 1fr; gap:0 44px; }
.club-faq details { min-width:0; }
.club-faq summary { padding:17px 0; font-size:13px; }
footer { padding:20px 32px; font-size:11px; }
.footer-brand { font-size:16px; }
.help-hero { text-align:center; padding:25px 0 40px; }
.help-hero .eyebrow { color:var(--green); font-size:12px; letter-spacing:0; }
.help-hero h1 { margin-top:15px; font-size:36px; font-weight:650; }
.help-hero>p:not(.eyebrow) { margin:15px 0 24px; font-size:13px; color:var(--muted); }
.help-search { display:flex; align-items:center; gap:12px; width:560px; max-width:100%; margin:0 auto; padding:0 18px; background:#fff; border:1px solid var(--line); border-radius:12px; text-align:left; }
.help-search span { font-size:25px; font-weight:400; color:var(--muted); }
.help-search input { border:0!important; background:transparent!important; font-size:13px!important; margin:0; min-width:0; }
.help-shortcuts { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:18px; font-size:11px; color:var(--muted); flex-wrap:wrap; }
.help-shortcuts a { color:#304d38; text-decoration:underline; text-underline-offset:4px; }
.help-workspace { display:grid; grid-template-columns:200px minmax(0,760px); justify-content:center; gap:36px; }
.help-directory { align-self:start; position:sticky; top:30px; }
.help-directory>p { font-size:12px; color:var(--muted); margin-bottom:16px; }
.help-directory nav { display:grid; gap:5px; }
.help-directory a { padding:12px; border-radius:8px; font-size:13px; }
.help-section { scroll-margin-top:24px; margin-bottom:32px; }
.help-section h2 { font-size:19px; margin-bottom:12px; }
.help-section h2>span { font-size:11px; color:#86978a; margin-right:15px; font-weight:400; }
.help-contact { border:1px solid var(--line); border-radius:14px; background:#fff; padding:24px; margin-top:40px; }
.help-contact h2 { font-size:20px; }
.help-contact p { color:var(--muted); font-size:13px; margin:12px 0 20px; }
@media(hover:hover) { .offer-card:has(.offer-buy:hover) { border-color:#a2bba8; } .offer-buy:hover { color:#fff; background:var(--green); } }
@media(max-width:1100px) { .offer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .purchase-guide { gap:20px; } .purchase-guide ol { gap:15px; } .offer-heading h3 { font-size:17px; } }
@media(max-width:760px) {
  .header { padding:12px 18px; min-height:64px; gap:16px; justify-content:space-between; } .header nav a { padding:8px 11px; font-size:11px; } .brand { font-size:18px; gap:6px; } .brand-mark { font-size:22px; width:23px; }
  main { margin:0; padding:20px 18px 30px; } .club-hero { padding:27px 24px; min-height:295px; grid-template-columns:1fr; gap:20px; } .club-hero-copy h1 { font-size:34px; } .club-hero-copy p { font-size:12px; margin:16px 0 20px; } .club-hero-wordmark { display:none; } .hero-guide { font-size:11px; }
  .resource-hall { margin-top:32px; } .hall-heading { margin-bottom:16px; gap:10px; } .hall-heading h2 { font-size:21px; } .hall-heading span { font-size:11px; }
  .offer-grid { gap:12px; } .offer-card { padding:15px; min-height:228px; } .offer-heading { gap:5px; flex-wrap:wrap; } .offer-symbol { font-size:19px; } .offer-heading h3 { font-size:13px; flex:1; } .offer-tag { font-size:8px; margin-left:24px; } .offer-caption { font-size:10px; margin-bottom:64px; max-width:100%; } .plan-art { top:87px; right:18px; width:70px; height:56px; padding:5px; } .plan-art strong { font-size:24px; } .weekly-art strong { font-size:10px; } .offer-bottom strong { font-size:20px; } .offer-bottom p>span { font-size:10px; } .offer-buy { width:28px; height:28px; font-size:16px; flex-shrink:0; } .offer-bottom { flex-wrap:wrap; gap:6px; }
  .list-view .offer-card { grid-template-columns:1fr auto; gap:10px; } .list-view .offer-heading { flex-wrap:nowrap; } .list-view .offer-tag { display:none; } .list-view .offer-caption { grid-column:1; grid-row:2; } .list-view .offer-bottom { grid-column:2; grid-row:1/3; } .list-view .offer-bottom strong { font-size:20px; }
  .purchase-guide { display:block; padding:22px; margin-top:20px; } .guide-title { display:flex; align-items:center; justify-content:space-between; } .guide-title a { margin:0; } .purchase-guide ol { display:grid; gap:18px; margin-top:22px; } .purchase-guide li { gap:14px; } .payment-methods { flex-wrap:wrap; gap:8px; padding:24px 0; } .payment-methods small { width:100%; margin-left:0; margin-top:2px; }
  .club-faq { padding-top:24px; } .club-faq-list { grid-template-columns:1fr; } .club-faq .hall-heading>div { display:block; } .club-faq .hall-heading span { display:block; margin-top:4px; } footer { padding:20px 18px; }
  .help-hero { padding:18px 0 30px; } .help-hero h1 { font-size:28px; } .help-hero>p:not(.eyebrow) { font-size:12px; line-height:1.8; } .help-shortcuts { gap:12px; } .help-workspace { grid-template-columns:1fr; gap:22px; } .help-directory { position:static; } .help-directory>p { display:none; } .help-directory nav { display:flex; overflow-x:auto; border-bottom:1px solid var(--line); gap:0; } .help-directory a { padding:12px 10px; flex-shrink:0; font-size:12px; } .help-contact { padding:22px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.club-hero { padding:36px 44px; }
.help-hero .eyebrow { justify-content:center; }
@media(max-width:760px) {
  .club-hero { padding:27px 24px; }
  .offer-heading { flex-wrap:nowrap; }
  .offer-heading h3 { overflow-wrap:anywhere; word-break:normal; line-height:1.5; }
  .offer-tag { display:none; }
  .plan-art { top:72px; }
}

/* A single shell width keeps navigation, content and footer aligned on wide screens. */
.header, body>footer { max-width:1536px; width:100%; margin-left:auto; margin-right:auto; }
.brand-logo { display:block; width:auto; max-width:120px; height:32px; object-fit:contain; flex-shrink:0; }
.footer-brand { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.footer-brand span { margin-left:0; }
footer .brand-logo { max-width:100px; height:26px; }
.official-price { display:inline-block; padding:2px 7px; border:1px solid var(--line); border-radius:999px; margin-top:6px; max-width:none; font-size:11px; line-height:1.4; }
.alipay-mark { display:block; width:20px; height:20px; background:transparent; border-radius:0; }
@media(max-width:760px) { .brand-logo { height:28px; max-width:62px; } .official-price { font-size:10px; } }