/* Primitives adapted from Product Hackers Design System/ui_kits/website/styles.css.
   Circular action uses the canonical 72px size defined in design.md. */
.ph-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ph-red); display: inline-block; flex-shrink: 0; }
.ph-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-1); display: inline-flex; align-items: center; gap: var(--sp-3); }
.ph-circle-btn { width: 72px; height: 72px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-on); display: grid; place-items: center; transition: background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }