@layer components {
  .nudge-prompt {
    max-inline-size: var(--measure);
    margin-inline: auto;
    margin-block-end: var(--space-8);
    padding-inline: var(--gutter-fluid);
  }

  .nudge-prompt__band {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-sunken);
  }

  .nudge-prompt__eyebrow {
    font: var(--type-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }

  .nudge-prompt__title {
    font: var(--type-body);
    color: var(--color-ink);
    text-wrap: pretty;
  }

  .nudge-prompt__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-block-start: var(--space-3);
  }
}