/* /membership: a quiet hero, then the page's one strong element, the two plans as tickets laid on
   a graphite build plate, then what members get and the questions. */
.mem-hero { padding-block: clamp(40px, 7vw, 88px) clamp(32px, 5vw, 56px); }
.mem-hero-inner { display: grid; gap: 16px; justify-items: start; }
.mem-hero h1 { max-width: 16ch; }
.mem-opens {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 9px 14px; border-radius: 10px;
  background: var(--paper); box-shadow: 0 0 0 1px var(--line); font: 500 12.5px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}

/* the plate */
.mem-plate { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 72px); background: var(--graphite); color: var(--on-dark); }
.mem-plate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(243, 242, 237, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(243, 242, 237, .045) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(80% 90% at 50% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(80% 90% at 50% 40%, #000 30%, transparent 85%);
}
.mem-plate .wrap { position: relative; }
.mem-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: clamp(16px, 3vw, 32px); }

.plan {
  display: grid; gap: 16px; align-content: start; padding: 24px; border-radius: var(--r-lg);
  background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), var(--shadow-lg);
}
.plan.is-best { box-shadow: 0 0 0 2px var(--lime), 0 0 32px -6px var(--lime-glow), var(--shadow-lg); }
.plan-k { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.plan-tag { padding: 4px 8px; border-radius: 6px; background: var(--lime); color: var(--ink); font-weight: 600; letter-spacing: .06em; }
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-amt { font-size: 48px; font-stretch: var(--wide); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.plan-per { font-size: 15px; color: var(--ink-3); }
.plan-rows { display: grid; margin: 0; border-top: 1px solid var(--line-2); }
.plan-rows div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.plan-rows dt { font: 500 10.5px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.plan-rows dd { font-size: 15px; font-weight: 600; text-align: right; }
.plan-btn { --btn-h: 52px; font-size: 16px; }
.plan-btn[hidden] { display: none; }
.plan-btn.is-soon { cursor: default; opacity: .62; }
.plan .dl-msg:empty { display: none; }

.mem-member {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; max-width: 752px; margin: 24px auto 0;
  padding: 16px 20px; border-radius: var(--r-lg); background: var(--graphite-2); box-shadow: 0 0 0 1px var(--line-dark);
}
.mem-member[hidden] { display: none; }
.mem-member > p:first-child { font-weight: 600; }
.mem-member-act { display: flex; flex-wrap: wrap; gap: 10px; }
.mem-member .btn-ghost { color: var(--on-dark); border-color: var(--line-dark); }
.mem-member .btn-ghost:hover { background: var(--graphite-3); }
.mem-member .dl-msg { flex-basis: 100%; text-align: center; color: var(--on-dark-2); }
.mem-member .dl-msg.is-err { color: #FF8A80; }
.mem-fine { margin-top: 22px; text-align: center; font-size: 13px; color: var(--on-dark-3); }
.mem-fine a { color: var(--on-dark-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243, 242, 237, .3); }

/* what members get */
.mem-sec { padding-top: clamp(56px, 8vw, 104px); }
.mem-sec:last-child { padding-bottom: var(--section-y); }
.mem-sec-head { display: grid; gap: 12px; max-width: 720px; margin-bottom: clamp(24px, 3vw, 36px); }
.mem-sec-head h2 { font-size: clamp(28px, 3.4vw, 42px); }
.mem-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mem-perks li { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.mem-perks .ico { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--lime-tint); color: var(--lime-deep); }
.mem-perks h3 { margin-top: 6px; font-size: 18px; font-stretch: var(--semi); }
.mem-perks p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) { .mem-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .mem-plans { grid-template-columns: minmax(0, 1fr); }
  .mem-perks { grid-template-columns: minmax(0, 1fr); }
}

/* questions */
.mem-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px 48px; align-items: start; }
.mem-qs { border-top: 1px solid var(--line); }
.mem-q { border-bottom: 1px solid var(--line); }
.mem-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 650; color: var(--ink);
}
.mem-q summary::-webkit-details-marker { display: none; }
.mem-q summary .ico { width: 18px; height: 18px; color: var(--ink-3); transition: rotate .2s var(--ease); }
.mem-q[open] summary .ico { rotate: 45deg; }
.mem-q p { padding: 0 2px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
@media (max-width: 860px) { .mem-faq { grid-template-columns: minmax(0, 1fr); } }