/* ============================================
   FlowStash — Earn Page (Author Funnel)
   Cinematic green accent · Generous space
   ============================================ */

.earn-hero {
  text-align: center;
  padding: var(--space-32) 0 var(--space-20);
  position: relative;
  overflow: hidden;
}

.earn-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 600px;
  background: radial-gradient(
    ellipse at center,
    rgba(45, 212, 160, 0.04) 0%,
    transparent 65%
  );
  pointer-events: none;
}

.earn-hero__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.earn-hero__title {
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  margin-bottom: var(--space-5);
  letter-spacing: var(--tracking-tighter);
}

.earn-hero__title-accent {
  background: linear-gradient(135deg, var(--success) 0%, #6ee7b7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.earn-hero__subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-12);
  line-height: var(--leading-relaxed);
}

/* ── Author Cases ── */
.author-cases {
  padding: var(--space-20) 0;
}

.author-cases__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.case-card {
  padding: var(--space-6);
}

.case-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  margin-bottom: var(--space-4);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
}

.case-card__nick {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  letter-spacing: var(--tracking-tight);
}

.case-card__product {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.case-card__stats {
  display: flex;
  gap: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.case-card__stat-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--accent);
}

.case-card__stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
  letter-spacing: var(--tracking-wide);
}

/* ── Revenue Split ── */
.revenue-split {
  padding: var(--space-20) 0;
}

.revenue-split__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.revenue-table {
  max-width: 560px;
  margin: 0 auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.revenue-table__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--space-4) var(--space-6);
  background: var(--bg-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.revenue-table__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-base);
  border-top: 1px solid var(--border-subtle);
  transition: background var(--duration-fast) var(--ease-default);
}

.revenue-table__row:hover {
  background: var(--bg-tertiary);
}

.revenue-table__sales {
  color: var(--text-secondary);
}

.revenue-table__percent {
  font-weight: var(--weight-bold);
  color: var(--success);
}

.revenue-table__row--highlight {
  background: var(--success-muted);
}

.revenue-table__row--highlight .revenue-table__percent {
  font-size: var(--text-lg);
}

/* ── How It Works (Author version) ── */
.earn-steps {
  padding: var(--space-20) 0;
}

.earn-steps__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

/* ── Final CTA ── */
.earn-cta {
  text-align: center;
  padding: var(--space-20) 0;
}

.earn-cta__card {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-8);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
}

.earn-cta__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-tight);
}

.earn-cta__desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  line-height: var(--leading-relaxed);
}

@media (max-width: 768px) {
  .earn-hero {
    padding: var(--space-24) 0 var(--space-16);
  }

  .earn-hero__title {
    font-size: var(--text-4xl);
  }

  .case-card__stats {
    flex-direction: column;
    gap: var(--space-3);
  }
}