/* ==========================================================================
   hoe.com — The Greenhouse membership page
   Standalone stylesheet. Reuses --tb-* tokens from styles.css (dark mode safe).
   No inline CSS; styles.css untouched.
   ========================================================================== */

/* -- Hero band -- */
.mem-hero { background: var(--tb-forest); color: var(--tb-on-forest); }
.mem-hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; padding: clamp(2.4rem, 5vw, 4rem) 0; }
.mem-hero .tb-eyebrow { color: var(--tb-clay-soft); }
.mem-hero h1 { color: var(--tb-on-forest); font-family: var(--tb-font-serif); font-size: clamp(2rem, 1rem + 3vw, 3.2rem); line-height: 1.06; margin: .5rem 0 1rem; }
.mem-hero h1 em { font-style: italic; color: var(--tb-clay-soft); }
.mem-hero__sub { color: color-mix(in srgb, var(--tb-on-forest) 80%, transparent); max-width: 46ch; margin: 0 0 1.5rem; }
.mem-perklist { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.4rem; }
.mem-perklist li { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .95rem; }
.mem-perklist .mem-check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--tb-moss); color: #fff; display: grid; place-items: center; }
.mem-price { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 1.1rem; }
.mem-price strong { font-family: var(--tb-font-serif); font-size: 2rem; }
.mem-price span { color: color-mix(in srgb, var(--tb-on-forest) 75%, transparent); }
.mem-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.mem-fine { color: color-mix(in srgb, var(--tb-on-forest) 65%, transparent); font-size: .8rem; margin: 1.1rem 0 0; max-width: 52ch; }
.mem-fine a { color: var(--tb-clay-soft); text-decoration: underline; }

.mem-hero__media { position: relative; border-radius: var(--tb-radius-lg); overflow: hidden; aspect-ratio: 4 / 3.4; box-shadow: var(--tb-shadow); }
.mem-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mem-hero__badge {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  background: var(--tb-surface); color: var(--tb-ink);
  border-radius: var(--tb-radius); box-shadow: var(--tb-shadow);
  padding: .7rem .95rem; display: flex; flex-direction: column;
}
.mem-hero__badge small { color: var(--tb-ink-muted); font-size: .74rem; }
.mem-hero__badge strong { font-size: .95rem; }

/* -- Section heading helper -- */
.mem-section { padding: clamp(2.4rem, 5vw, 4rem) 0; }
.mem-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(1.6rem, 3vw, 2.6rem); }
.mem-head h2 { font-family: var(--tb-font-serif); font-size: clamp(1.7rem, 1rem + 2vw, 2.6rem); margin: .35rem 0 .5rem; }
.mem-head h2 em { font-style: italic; color: var(--tb-leaf); }
.mem-head p { color: var(--tb-ink-soft); margin: 0; }

/* -- Benefits grid -- */
.mem-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.mem-benefit {
  background: var(--tb-surface); border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius); padding: 1.5rem 1.4rem;
  box-shadow: var(--tb-shadow-sm);
  transition: transform var(--tb-ease), box-shadow var(--tb-ease);
}
.mem-benefit:hover { transform: translateY(-4px); box-shadow: var(--tb-shadow); }
.mem-benefit__ic { width: 48px; height: 48px; border-radius: 12px; background: var(--tb-bg-alt); color: var(--tb-forest); display: grid; place-items: center; margin-bottom: 1rem; }
.mem-benefit h3 { font-family: var(--tb-font-serif); font-size: 1.2rem; margin: 0 0 .4rem; }
.mem-benefit p { color: var(--tb-ink-soft); font-size: .9rem; margin: 0; }

/* -- Welcome seed band -- */
.mem-gift { background: var(--tb-bg-alt); border-top: 1px solid var(--tb-border); border-bottom: 1px solid var(--tb-border); }
.mem-gift__inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.mem-gift__media { border-radius: var(--tb-radius-lg); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--tb-shadow); position: relative; }
.mem-gift__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mem-gift__points { display: grid; gap: 1.2rem; margin: 1.2rem 0 1.6rem; }
.mem-gift__point { display: flex; gap: .9rem; align-items: flex-start; }
.mem-gift__point .mem-benefit__ic { margin: 0; flex: none; }
.mem-gift__point h3 { font-size: 1.05rem; margin: 0 0 .25rem; }
.mem-gift__point p { color: var(--tb-ink-soft); font-size: .9rem; margin: 0; }

/* -- Comparison table -- */
.mem-compare { width: 100%; border-collapse: collapse; border: 1px solid var(--tb-border); border-radius: var(--tb-radius); overflow: hidden; }
.mem-compare th, .mem-compare td { padding: .9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--tb-border); font-size: .92rem; }
.mem-compare thead th { background: var(--tb-bg-alt); font-family: var(--tb-font-sans); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tb-ink-soft); }
.mem-compare thead th:nth-child(2) { color: var(--tb-forest); }
.mem-compare td:not(:first-child), .mem-compare th:not(:first-child) { text-align: center; }
.mem-compare tbody tr:last-child td { border-bottom: 0; }
.mem-compare .mem-yes { color: var(--tb-leaf); display: inline-grid; place-items: center; }
.mem-compare .mem-no { color: var(--tb-ink-muted); }
.mem-compare__col--member { background: color-mix(in srgb, var(--tb-leaf) 8%, transparent); font-weight: 600; }

/* -- How it works -- */
.mem-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.mem-step { text-align: center; padding: 0 .6rem; }
.mem-step__num { width: 46px; height: 46px; margin: 0 auto .9rem; border-radius: 50%; background: var(--tb-forest); color: var(--tb-on-forest); display: grid; place-items: center; font-family: var(--tb-font-serif); font-weight: 700; font-size: 1.2rem; }
.mem-step h3 { font-family: var(--tb-font-serif); font-size: 1.15rem; margin: 0 0 .4rem; }
.mem-step p { color: var(--tb-ink-soft); font-size: .9rem; margin: 0; }

/* -- FAQ (native details/summary) -- */
.mem-faq { max-width: 760px; margin: 0 auto; display: grid; gap: .8rem; }
.mem-faq details { border: 1px solid var(--tb-border); border-radius: var(--tb-radius); background: var(--tb-surface); overflow: hidden; }
.mem-faq summary {
  list-style: none; cursor: pointer; padding: 1.05rem 1.2rem;
  font-weight: 600; font-size: 1rem; color: var(--tb-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.mem-faq summary::-webkit-details-marker { display: none; }
.mem-faq summary::after { content: "+"; font-size: 1.4rem; color: var(--tb-leaf); line-height: 1; transition: transform var(--tb-ease); }
.mem-faq details[open] summary::after { content: "\2212"; }
.mem-faq__body { padding: 0 1.2rem 1.1rem; color: var(--tb-ink-soft); font-size: .92rem; }

/* -- Final CTA -- */
.mem-cta { background: var(--tb-forest); color: var(--tb-on-forest); text-align: center; }
.mem-cta__inner { padding: clamp(2.4rem, 5vw, 3.8rem) 0; }
.mem-cta h2 { color: var(--tb-on-forest); font-family: var(--tb-font-serif); font-size: clamp(1.7rem, 1rem + 2vw, 2.6rem); margin: 0 0 .6rem; }
.mem-cta h2 em { font-style: italic; color: var(--tb-clay-soft); }
.mem-cta p { color: color-mix(in srgb, var(--tb-on-forest) 78%, transparent); margin: 0 auto 1.4rem; max-width: 48ch; }

/* -- Responsive -- */
@media (max-width: 860px) {
  .mem-hero__inner, .mem-gift__inner { grid-template-columns: 1fr; }
  .mem-hero__media { order: -1; aspect-ratio: 16 / 10; }
  .mem-benefits { grid-template-columns: 1fr 1fr; }
  .mem-steps { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 560px) {
  .mem-benefits { grid-template-columns: 1fr; }
  .mem-perklist { grid-template-columns: 1fr; }
  .mem-compare th, .mem-compare td { padding: .7rem .6rem; font-size: .84rem; }
}