---
/** CheckItem — a ✓ capability row (§12). Render inside a <ul class="checklist">. */
interface Props {
  label: string;
  /** Optional dimmed suffix rendered as "(note)", e.g. "coming soon". */
  note?: string;
}
const { label, note } = Astro.props;
---

<li class="check">
  <span class="tick" aria-hidden="true">✓</span>
  <span>{label}{note && <span class="note"> ({note})</span>}</span>
</li>

<style>
  .check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.3rem 0;
  }
  .tick {
    color: var(--signal-400);
    font-weight: 700;
    line-height: 1.5;
  }
  .note {
    color: var(--fg-muted);
    font-size: 0.9em;
    white-space: nowrap;
  }
</style>
