@layer blocks {
  /* The hero's live demo. Rows reuse .task-item / .checkbox / .badge, the
     search/create line reuses .write-line, and the create plus reuses
     .task-create, so the marketing page and the product cannot drift apart.
     Only what is demo-only lives here: the handwritten label. */
  .demo-label {
    --cluster-align: flex-end;
    --cluster-space: var(--space-2);
  }

  .demo-label svg {
    margin-block-end: 2px;
    color: var(--color-decorative);
  }

  .demo .write-line {
    --flow-space: var(--space-1); /* spec .demo-label margin-bottom; do not inherit the CTA gap */
  }

  .demo-list {
    --flow-space: var(--space-half); /* spec 18px */
  }
}