/* ==========================================================================
   hero.css — hero copy, price row, CTA cluster
   Split out of the original components.css; load order is preserved
   exactly, because several rules here depend on source order.
   ========================================================================== */

/* ---- Hero pieces ---- */
.hero-caption p {
  width: 320px;
  text-align: right;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 24px;
}
.hero-caption .divider--v { height: 35px; }
.hero-caption-arrow { width: 20px; height: 20px; }

/* Design: Aeonik Medium 40 */
.hero-buy-name {
  font-size: 40px;
  font-weight: var(--w-medium);
}

.hero-buy-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.price { font-size: 20px; }
.hero-buy-actions { display: flex; gap: 12px; }