/* Supporter pages: /support, /supporters, Account → Support, Platform admin → Supporters. */
.sup-hero { padding: var(--s-8) 0 var(--s-6); background:
  radial-gradient(60% 120% at 85% 0%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 70%),
  radial-gradient(50% 100% at 0% 100%, color-mix(in oklab, var(--pb) 12%, transparent), transparent 70%); border-bottom: 1px solid var(--line); }
.sup-h1 { font-family: var(--font-display); font-style: italic; font-stretch: 125%; letter-spacing: -0.02em; margin: var(--s-2) 0; }
.sup-lead { max-width: 62ch; }
.sup-already { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.sup-where { padding-top: var(--s-6); }
.sup-where-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); }
.sup-where-list li { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.sup-where-list strong { display: block; }
.sup-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; color: var(--brand); background: color-mix(in oklab, var(--brand) 14%, transparent); }
.sup-ico .icon { width: 20px; height: 20px; }
.sup-plans { padding-top: var(--s-7); }
.sup-plans-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.seg-btn { padding: 6px 14px; border-radius: 999px; font-weight: 650; font-size: var(--fs-sm); color: var(--text-2); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.seg-btn[aria-current="true"] { background: var(--brand); color: var(--on-brand, #04121a); }
.seg-btn[aria-current="true"] .badge { background: color-mix(in oklab, #000 18%, transparent); color: inherit; }
.sup-cur { width: auto; min-height: 36px; }
.sup-soon { margin: var(--s-4) 0; border-color: color-mix(in oklab, var(--leader) 45%, var(--line)); }
.sup-soon h3 { margin: 0 0 var(--s-2); }
.sup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.sup-tier { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); position: relative; border-top: 3px solid var(--sup-c); }
.sup-tier-mint { --sup-c: var(--brand); } .sup-tier-gold { --sup-c: var(--leader); } .sup-tier-purple { --sup-c: var(--pb); } .sup-tier-cyan { --sup-c: var(--accent); }
.sup-tier header { display: flex; align-items: center; gap: var(--s-2); }
.sup-tier h3 { margin: 0; flex: 1; }
.sup-tier.is-current { box-shadow: 0 0 0 1px var(--sup-c), 0 10px 30px -18px var(--sup-c); }
.sup-mark { color: var(--sup-c, var(--brand)); font-size: 1.3rem; line-height: 1; }
.sup-mark.sup-mint { --sup-c: var(--brand); } .sup-mark.sup-gold { --sup-c: var(--leader); } .sup-mark.sup-purple { --sup-c: var(--pb); }
.sup-price { margin: var(--s-2) 0 0; font: 800 var(--fs-2xl)/1 var(--font-display); font-stretch: 110%; }
.sup-price .mono { font-family: var(--font-display); }
.sup-save { margin: 0; color: var(--brand); font-weight: 650; }
.sup-perks { margin: var(--s-2) 0 var(--s-3); padding-left: 1.1em; color: var(--text-2); flex: 1; }
.sup-perks li { margin: 3px 0; }
.sup-buy .check, .sup-account .check { display: flex; gap: 8px; align-items: flex-start; }
.sup-fine { margin-top: var(--s-4); max-width: 80ch; }
.sup-wall-cta { padding-top: var(--s-7); padding-bottom: var(--s-8); }
.sup-wall { padding-top: var(--s-6); padding-bottom: var(--s-8); display: grid; gap: var(--s-6); }
.sup-wall-tier h2 { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); }
.sup-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-3); }
.sup-logo { display: grid; place-items: center; padding: var(--s-3); aspect-ratio: 2 / 1; background: color-mix(in oklab, #fff 92%, var(--surface)); }
.sup-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.sup-names { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sup-names li { padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--sup-c, var(--brand)) 40%, var(--line)); background: var(--surface); font-weight: 600; }
.sup-logo-preview { max-width: 160px; height: auto; background: #fff; border-radius: var(--r-sm); padding: 6px; }
.sup-mod { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.sup-mod img { background: #fff; border-radius: 4px; object-fit: contain; }
.sup-mod .truncate { flex: 1; min-width: 120px; }
@media (max-width: 640px) {
  .sup-hero { padding: var(--s-6) 0 var(--s-5); }
  .sup-plans-head { align-items: flex-start; }
}
.sup-perk-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.sup-perk-row > span:first-child { flex: 1; min-width: 0; }
.sup-perk-row .badge { flex: none; }
/* The coffees thank-you list (one-off Buy Me a Coffee supporters) and Platform admin → Buy Me a Coffee. */
.sup-coffee-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s-3); }
.sup-coffee-list li { overflow-wrap: anywhere; }
.bmc-link { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bmc-link .input { width: auto; min-width: 0; flex: 1 1 160px; min-height: 32px; }