.mem-hero {
  background: var(--yellow);
  border-bottom: 4px solid var(--ink);
  padding: 56px 0 48px;
}
.mem-hero-inner {
  max-width: 720px;
  text-align: center;
  margin: 0 auto;
}
.mem-hero-inner .kicker {
  display: inline-block;
  border: 3px solid var(--ink);
  padding: 7px 14px;
  background: var(--red);
  color: #fff;
  font-family: var(--body);
  font-weight: 800;
  font-size: 13px;
  transform: rotate(-2deg);
  margin-bottom: 18px;
}
.mem-hero h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  margin: 0 0 20px;
  color: var(--ink);
}
.mem-hero-desc {
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
  max-width: 560px;
  margin: 0 auto 32px;
}
.mem-hero-note {
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  opacity: 0.75;
  margin: 14px 0 0;
}

.mem-cta-btn {
  font-family: var(--body);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.3px;
  background: var(--red);
  color: #fff;
  border: 3px solid var(--ink);
  padding: 16px 32px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.mem-cta-btn:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--ink); }
.mem-cta-btn:active { transform: translate(0, 0); box-shadow: var(--shadow-sm); }
.mem-cta-btn-lg { font-size: 19px; padding: 20px 40px; }

.mem-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 56px 0 20px;
}
.mem-benefit-card {
  background: var(--paper-dim);
  border: 4px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: 26px 24px;
}
.mem-benefit-icon {
  font-size: 34px;
  margin-bottom: 14px;
  line-height: 1;
}
.mem-benefit-card h3 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.2px;
  margin: 0 0 10px;
  color: var(--ink);
}
.mem-benefit-card p {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.mem-compare {
  padding: 40px 0 60px;
}
.mem-compare h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 28px;
  letter-spacing: -0.5px;
  text-align: center;
  margin: 0 0 28px;
  color: var(--ink);
}
.mem-compare-table-wrap {
  max-width: 640px;
  margin: 0 auto;
  overflow-x: auto;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow-sm);
}
.mem-compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper-dim);
  font-family: var(--body);
}
.mem-compare-table th {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.3px;
  padding: 14px 16px;
  border-bottom: 3px solid var(--ink);
  color: var(--ink);
}
.mem-compare-table th:first-child { text-align: left; }
.mem-compare-table th:not(:first-child) { text-align: center; width: 90px; }
.mem-compare-table td {
  padding: 13px 16px;
  border-top: 1px solid var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.mem-compare-table td:not(:first-child) { text-align: center; font-size: 17px; font-weight: 800; }
.mem-compare-table .mem-yes { color: var(--blue); }
.mem-compare-table .mem-no { color: var(--ink-soft); opacity: 0.5; }

.mem-final-cta {
  background: var(--ink);
  color: var(--paper);
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  text-align: center;
  padding: 56px 20px;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}
.mem-final-cta h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.5px;
  margin: 0 0 10px;
  color: var(--paper);
}
.mem-final-cta p {
  font-family: var(--body);
  font-size: 16px;
  color: var(--paper);
  opacity: 0.8;
  margin: 0 0 28px;
}
.mem-final-cta .mem-hero-note { color: var(--paper); opacity: 0.65; }

@media (max-width: 850px) {
  .mem-benefits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mem-benefits { grid-template-columns: 1fr; }
  .mem-hero h1 { letter-spacing: -1px; }
}