/* The (i) beside each plan item, and its explanation box (owner, 25 Oct 2026). Shared by
   the partners page and the partner portal's Your plan; assets/js/plan-explain.mjs opens
   and closes it. On a wide screen the box sits beside the item (.pf-list--right puts it to
   the right, --left to the left); narrower, it opens under the item. */
.pf-list { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 2px; }
.pf { position: relative; margin: 0; }
.pf-q { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; border: 0; border-radius: var(--r-sm, 10px); background: transparent; color: var(--ink); font: inherit; font-size: .95rem; font-weight: 600; text-align: left; cursor: pointer; }
.pf-q:hover, .pf.is-open .pf-q { background: var(--surface-alt); }
.pf-q .ic { flex: 0 0 20px; width: 20px; height: 20px; color: var(--accent-text); }
.pf-label { flex: 1 1 auto; }
.pf-i { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink-3); color: var(--ink-3); font: 700 .72rem/1 Georgia, serif; font-style: italic; }
.pf.is-open .pf-i { background: var(--accent); border-color: var(--accent); color: #fff; }
.pf-box { display: none; margin: 0; max-width: none; padding: 12px 14px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); font-weight: 400; text-align: left; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 12px; font-size: .9rem; line-height: 1.5; color: var(--ink); box-shadow: var(--shadow-lift); }
.pf.is-open .pf-box { display: block; }
/* Beside the item on a wide card: the box floats to the right of the row, over the card's
   empty side, with a small pointer back to the item. */
@media (min-width: 1100px) {
  .pf-box { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: min(280px, 60%); }
  .pf-list--right .pf-box { left: calc(100% + 18px); }
  .pf-list--left .pf-box { right: calc(100% + 18px); }
  .pf-box::before { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; background: inherit; border: inherit; transform: translateY(-50%) rotate(45deg); }
  .pf-list--right .pf-box::before { left: -7px; border-top-color: transparent; border-right-color: transparent; }
  .pf-list--left .pf-box::before { right: -7px; border-bottom-color: transparent; border-left-color: transparent; }
}
@media (max-width: 1099px) { .pf.is-open .pf-box { margin: 4px 8px 8px 38px; } }