/* Home-page specifics only. Everything shared lives in design.css. */

.hero { padding-block: var(--space-10) var(--space-9); }
.hero h1 {
  margin-top: var(--space-5);
  max-width: 15ch;
  font-size: var(--text-display);
  line-height: 0.98;
  letter-spacing: -0.052em;
  font-weight: var(--weight-semibold);
}
.hero-lead { margin-top: var(--space-6); font-size: var(--text-lg); max-width: 36rem; }
.hero-actions { margin-top: var(--space-7); }
.hero-fine { margin-top: var(--space-4); max-width: 36rem; }
.hero-facts {
  list-style: none;
  display: grid; gap: var(--space-5);
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.hero-facts strong { display: block; font-size: var(--text-lg); letter-spacing: -0.02em; }
.hero-facts span { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); }
@media (min-width: 720px) {
  .hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .hero { padding-block: var(--space-8) var(--space-8); }
  .hero-actions .btn { flex: 1 1 auto; }
}

/* How it works */
.how-steps { list-style: none; }
.how-step { padding-top: var(--space-5); border-top: 1px solid var(--ink); }
.how-num { display: block; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-text); }
.how-step h3 { margin-top: var(--space-5); font-size: var(--text-lg); letter-spacing: -0.02em; }
.how-step p { margin-top: var(--space-2); color: var(--muted); }

/* API example */
.api-layout { display: grid; gap: var(--space-7); align-items: center; }
.api-layout .section-head { margin-bottom: 0; }
.api-code { margin: 0; min-width: 0; }
@media (min-width: 960px) {
  .api-layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-9); }
}

/* Pricing */
.plan { display: flex; flex-direction: column; }
.plan-free { border-color: var(--ink); }
.plan h3 { font-size: var(--text-base); color: var(--muted); font-weight: var(--weight-medium); }
.plan-price { margin-top: var(--space-3); display: flex; align-items: baseline; gap: 2px; }
.plan-price strong { font-size: 2.5rem; line-height: 1; letter-spacing: -0.04em; font-weight: var(--weight-semibold); }
.plan-price span { color: var(--muted); }
.plan-list { list-style: none; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); flex: 1; }
.plan-list li { font-size: var(--text-sm); color: var(--ink-2); }
.plan-list li + li { margin-top: var(--space-2); }
.plan-cta { margin-top: var(--space-5); }
.plan .badge { white-space: normal; text-align: left; line-height: 1.3; padding-block: 4px; }
.pricing-note { margin-top: var(--space-6); max-width: 52rem; }

/* Footer */
.site-footer .brand + p { margin-top: var(--space-2); }