/* v6.28.7 pay first: the pay box, the locked "after you pay" list, and the posts a month chooser */
.pf-pay { border-left: 4px solid var(--accent, #0f5c4c); }
.pf-pay h2, .pf-pay h3 { margin-top: 0; }
.pf-lead { font-size: 1.02rem; margin: .25rem 0 .75rem; }
.pf-locked { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .45rem; }
.pf-locked li { display: flex; gap: .6rem; align-items: center; padding: .55rem .75rem; border: 1px dashed var(--line-strong, #cfd6d2); border-radius: 10px; background: var(--bg-alt, #f5f7f6); color: var(--muted, #6b7873); }
.pf-lock { display: inline-flex; width: 1.4rem; height: 1.4rem; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--line-strong, #cfd6d2); font-size: .7rem; flex: none; }
.pf-greyed { opacity: .65; }
.pf-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin: .6rem 0 1rem; }
.pf-tier { display: grid; gap: .15rem; align-content: start; text-align: left; padding: .7rem .8rem; border: 2px solid var(--line-strong, #cfd6d2); border-radius: 12px; background: var(--surface, #fff); color: var(--ink, #16211d); cursor: pointer; font: inherit; }
.pf-tier:hover, .pf-tier:focus-visible { border-color: var(--accent, #0f5c4c); }
.pf-tier.on { border-color: var(--accent, #0f5c4c); background: var(--accent-soft, #e6f2ee); }
.pf-tier strong { font-size: 1.15rem; }
.pf-tier .pf-n { font-weight: 700; }
.pf-tier small { color: var(--muted, #6b7873); }
.pf-quiet { margin-top: 1rem; color: var(--muted, #6b7873); font-size: .92rem; }
.pf-del { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line, #e3e8e5); }
.pf-danger { color: #b42318; }
.pf-confirm { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; }
.pf-pick { border: 0; padding: 0; margin: 0 0 .8rem; }
.pf-danger-btn { background: #b42318; border-color: #b42318; color: #fff; }