@layer components {
  .plan-picker { border: 0; padding: 0; margin: 0 0 1rem; min-inline-size: 0; }
  .plan-picker legend { padding: 0; font-weight: 650; margin-block-end: .6rem; }
  /* Monthly/yearly as two real radios; :has() swaps prices and the detail line without JS. */
  .plan-picker__interval { display: flex; inline-size: fit-content; max-inline-size: 100%; gap: .25rem; margin-block-end: .6rem; padding: .2rem; border: 1px solid var(--color-ink-lighter); border-radius: 999px; }
  .plan-picker__interval-option { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-block-size: 2.5rem; padding: 0 .85rem; border-radius: 999px; font-size: .875rem; font-weight: 600; cursor: pointer; }
  .plan-picker__interval-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .plan-picker__interval-option:has(:checked) { background: var(--color-ink); color: var(--color-canvas); }
  .plan-picker__interval-option:has(:focus-visible) { outline: 2px solid var(--color-positive); outline-offset: 3px; }
  .plan-picker__save { padding: .1rem .4rem; border-radius: 3px; background: var(--color-highlight); color: var(--color-ink); font-size: .7rem; font-weight: 700; white-space: nowrap; }
  .plan-picker__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-block-end: .6rem; }
  .plan-picker__option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .45rem; row-gap: .2rem; border: 1px solid var(--color-ink-lighter); border-radius: .75rem; padding: .7rem .65rem; 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 { margin: 0; accent-color: var(--color-positive); }
  .plan-picker__name { font-weight: 650; }
  .plan-picker__price { grid-column: 1 / -1; font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .plan-picker__price small { font-size: .75rem; font-weight: 400; color: var(--color-ink-dark); }
  .plan-picker__detail { display: none; margin: 0 0 .5rem; font-size: .875rem; line-height: 1.5; }
  .plan-picker:has(input[name="registration[plan]"][value="free"]:checked) .plan-picker__detail[data-plan="free"],
  .plan-picker:has(input[name="registration[plan]"][value="starter"]:checked) .plan-picker__detail[data-plan="starter"],
  .plan-picker:has(input[name="registration[plan]"][value="pro"]:checked) .plan-picker__detail[data-plan="pro"] { display: block; }
  .plan-picker:has(input[name="registration[interval]"][value="year"]:checked) [data-interval-only="month"],
  .plan-picker:not(:has(input[name="registration[interval]"][value="year"]:checked)) [data-interval-only="year"] { display: none; }
  .plan-picker__note { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--color-ink-dark); }
  .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__yearly { font-size: .875rem; color: var(--color-ink-dark); }
  .billing-interval { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .875rem; }
  .billing-interval legend { padding: 0; margin-block-end: .25rem; }
  .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 { padding-inline: .5rem; } .plan-picker__interval-option { padding: 0 .6rem; } }
}