@layer components {
  .plan-picker { border: 0; padding: 0; margin: 0 0 1rem; min-inline-size: 0; }
  .plan-picker legend { font-weight: 650; margin-block-end: .6rem; }
  .plan-picker__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-block-end: .75rem; }
  .plan-picker__option { display: flex; align-items: center; gap: .45rem; border: 1px solid var(--color-ink-lighter); border-radius: .75rem; padding: .7rem .6rem; cursor: pointer; }
  .plan-picker__option:has(:checked) { background: color-mix(in srgb, var(--color-positive) 8%, var(--color-surface)); border-color: var(--color-positive); box-shadow: inset 0 0 0 1px var(--color-positive); }
  .plan-picker__option:focus-within { outline: 2px solid var(--color-positive); outline-offset: 3px; }
  .plan-picker__option input { flex: 0 0 auto; accent-color: var(--color-positive); }
  .plan-picker__option strong, .plan-picker__option small { display: block; }
  .plan-picker__option small { font-size: .75rem; white-space: nowrap; }
  .billing-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .billing-plan { border: 1px solid var(--color-ink-lighter); border-radius: 1rem; padding: 1.25rem; display: flex; flex-direction: column; gap: .8rem; }
  .billing-plan--selected { border-color: var(--color-positive); background: color-mix(in srgb, var(--color-positive) 8%, var(--color-surface)); }
  .billing-plan h2, .billing-plan p { margin: 0; }
  .billing-plan__price { font-size: 2rem; font-weight: 700; }
  .billing-plan__price small { font-size: .85rem; font-weight: 400; }
  .billing-plan ul { padding-inline-start: 1.2rem; font-size: .875rem; flex-grow: 1; }
  .billing-plan li + li { margin-block-start: .6rem; }
  .ed-plan-notes { max-inline-size: 76ch; margin-block-start: 2rem; font-size: .85rem; line-height: 1.65; opacity: .8; }
  .ed-plan-notes p + p { margin-block-start: .75rem; }
  @media (max-width: 800px) { .billing-plans { grid-template-columns: 1fr; } }
  @media (max-width: 380px) { .plan-picker__option { flex-direction: column; align-items: start; } }
}