/* Shared introductory offer for the homepage, monthly plans, and consulting. */
.early-client-offer {
  padding: clamp(24px, 4vw, 40px);
  margin-bottom: 24px;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-color);
  border-radius: var(--radius-panel);
  background: var(--surface-bg);
  scroll-margin-top: 120px;
}
.early-client-offer h2 { max-width: 850px; margin: 8px 0 16px; }
.early-client-offer p { max-width: 900px; margin: 0 0 16px; color: var(--text-secondary); }
.early-client-offer .early-client-terms { font-size: var(--fs-secondary); line-height: 1.6; }
.early-client-offer .btn { margin-top: 4px; }
/* Let the full-width monthly pricing offer use its available space. */
.early-client-offer h2,
.early-client-offer p { max-width: none; }
.early-client-offer > :last-child { margin-bottom: 0; }
#early-client-pricing { scroll-margin-top: 120px; }
.early-client-regular { margin: 0 0 6px; color: var(--text-secondary); font-size: var(--fs-secondary); }
.early-client-rate-label { margin: 0 0 8px; color: var(--accent-label-color); font-weight: 700; font-size: var(--fs-secondary); }
.early-client-savings { margin: 0 0 16px; color: var(--text-secondary); font-size: var(--fs-secondary); line-height: 1.5; }
@media (max-width: 640px) {
  .early-client-offer .btn { width: 100%; text-align: center; }
}

/* Keep savings readable in both themes and at narrow card widths. */
.early-client-regular s { text-decoration-thickness: 2px; }
.early-client-savings {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  margin: 12px 0;
  border-left: 3px solid var(--accent-color);
  border-radius: 8px;
  background: var(--nav-link-active-bg);
  color: var(--heading-color);
}
.early-client-savings strong { font-weight: 800; }
.early-client-savings span { color: var(--text-primary); }
.early-client-renewal {
  margin: 0 0 18px;
  color: var(--text-secondary);
  font-size: var(--fs-secondary);
  line-height: 1.5;
}