@layer components {
  .legal { font-size: 1.0625rem; line-height: var(--leading-normal); }
  :where(.legal) :where(strong) { font-weight: 600; }

  .legal__article { display: flex; flex-direction: column; gap: var(--space-md); max-width: 44rem; padding-block: var(--space-2xl) var(--space-3xl); }
  .legal__article h2 { margin-top: var(--space-lg); font-size: 1.375rem; }
  .legal__article ul { display: flex; flex-direction: column; gap: var(--space-sm); padding-inline-start: 1.25em; list-style: disc; }
  .legal__article a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  .legal__article a:hover { color: var(--xf-ink-hover); }
  .legal__article a:focus-visible { outline: var(--xf-focus-ring); outline-offset: var(--xf-focus-offset); }

  .legal__header { display: flex; flex-direction: column; gap: var(--space-sm); padding-bottom: var(--space-lg); border-bottom: var(--xf-border); }
  .legal__title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: var(--tracking-tight); text-wrap: balance; }
  .legal__updated { color: var(--xf-ink-soft); font-size: var(--text-sm); }
  .legal__notice { align-self: flex-start; padding: var(--space-sm) var(--space-md); border: var(--xf-border-thin); border-radius: var(--xf-radius-sm); background: var(--xf-amber); font-size: var(--text-sm); font-weight: 600; }

  .legal__contact { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 2px dashed var(--xf-ink); }
}