@layer brand, tokens, density, elements, values, brand-mark, spacing, cut-edges, actions, panels, marks, roles, headings, regions, authored-text, shell, absence, layouts, motion, states, embed, tables, truncation, print, without-fills, hidden;
@layer spacing {
  .kit-role-agreement {
    display: flex;
    flex-direction: column;
    --_kit-stack-gap: var(--_kit-region);
    row-gap: var(--_kit-stack-gap);
  }
}
@layer roles {
  @media screen and (width < 720px) {
    :is(.kit-role-action-group, .kit-role-action-group > :where(form:not([hidden], [class*=kit-]))) > .kit-role-agreement {
      flex: none;
      inline-size: 100%;
    }
  }
}