/* Support us page only. Do not restyle the shared header or footer. */

.support-us {
  width: min(840px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 72px;
  color: var(--ink);
}

@media (max-width: 760px) {
  .support-us {
    width: var(--mobile-content-width, 95%);
  }
}

.support-us-kicker {
  margin: 0 0 8px;
  color: var(--premium, #62417A);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 650;
}

.support-us h1 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.support-us h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

.support-us p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.55;
}

.support-us-lead,
.support-us-noads {
  color: var(--ink) !important;
  font-size: 1.05rem;
}

.support-us-signed {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--premium, #62417A) !important;
  background: color-mix(in srgb, var(--paper-bright, #FFF9E8) 72%, var(--premium, #62417A));
  font-size: 0.88rem;
}

.support-plans {
  display: grid;
  gap: 16px;
  margin: 28px 0 20px;
}

.support-card {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper) 88%, #F6E6C4);
}

.support-card.is-support {
  border-color: color-mix(in srgb, var(--accent, #C88708) 50%, var(--line));
  background: color-mix(in srgb, var(--paper) 78%, #F3D38A);
}

.support-card .section-kicker,
.support-us-status .section-kicker {
  display: block;
  margin: 0 0 6px;
  color: var(--accent, #956300);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.support-card .price {
  margin: 12px 0 4px;
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 650;
}

.support-card .price-meta,
.support-card .lede-tight {
  color: var(--muted);
}

.support-card .offer-benefits {
  margin: 12px 0 0;
}

.support-card .offer-benefits li:empty {
  display: none;
}

.support-card .offer-benefits li::before {
  background: var(--premium, #62417A);
}

.support-card .founder-slots {
  display: grid;
  gap: 8px;
  margin: 16px 0 4px;
  padding: 0;
  list-style: none;
}

.support-card .founder-slots #slots {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--ink);
}

.support-card #slots:empty {
  display: none;
}

.support-card .founder-slots .slot-meter {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.support-card .progress {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent, #C88708) 18%, var(--gris, #e8dfd0));
}

.support-card .progress > i {
  display: block;
  height: 100%;
  background: var(--accent, #C88708);
}

.support-card .btn,
.support-card #freeCta {
  margin-top: 8px;
}

.support-card .founder-cta-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0 8px;
}

.support-card #buy.founder-cta,
.support-card .founder-cta {
  margin-top: 0;
  width: auto;
  min-width: min(16.5rem, 100%);
  max-width: 100%;
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  background: var(--premium, #62417A);
  color: #fff;
  font-weight: 650;
  text-align: center;
}

.support-card #buy.founder-cta:hover,
.support-card .founder-cta:hover {
  background: color-mix(in srgb, var(--premium, #62417A) 86%, #000);
}

.support-card #buy.founder-cta:focus-visible,
.support-card .founder-cta:focus-visible {
  outline: 2px solid var(--premium, #62417A);
  outline-offset: 3px;
}

.support-card #buy.founder-cta:disabled,
.support-card #buy.founder-cta.is-sold-out,
.support-card .founder-cta:disabled,
.support-card .founder-cta.is-sold-out {
  opacity: 0.45;
  filter: grayscale(0.35);
  cursor: not-allowed;
  pointer-events: none;
}

html[data-ds-theme="dark"] .support-card #buy.founder-cta,
[data-ds-theme="dark"] .support-card .founder-cta {
  background: color-mix(in srgb, var(--premium, #8B5CAD) 82%, #fff);
  color: #fff;
}

.support-us-why {
  margin: 8px 0 0;
  padding: 18px 18px 8px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper-bright, #FFF9E8) 86%, var(--premium, #62417A));
  border: 1px solid color-mix(in srgb, var(--premium, #62417A) 22%, var(--line));
}

.support-us-why h2 {
  color: var(--premium, #62417A);
}

.support-us-status {
  margin: 24px 0 28px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.support-us-status strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.support-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 8px;
}

.support-us-copied {
  color: var(--ink) !important;
  font-size: 0.9rem;
}

html.is-paid-member #guestView {
  display: none !important;
}

html.is-paid-member #memberView {
  display: block !important;
}

html[data-ds-theme="dark"] .support-card,
[data-ds-theme="dark"] .support-card {
  background: color-mix(in srgb, var(--paper) 88%, #3a2a14);
}

html[data-ds-theme="dark"] .support-card.is-support,
[data-ds-theme="dark"] .support-card.is-support {
  background: color-mix(in srgb, var(--paper) 78%, #5a4218);
  border-color: color-mix(in srgb, var(--accent, #E0C078) 45%, var(--line));
}

@media (min-width: 720px) {
  .support-plans {
    grid-template-columns: 1fr 1.15fr;
    align-items: stretch;
  }
}

@media (max-width: 390px) {
  .support-us {
    width: var(--mobile-content-width, 95%);
    padding-top: 20px;
  }

  .support-share-actions .btn,
  .support-card .btn,
  .support-card #freeCta {
    flex: 1 1 100%;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}