/* 11-04 tier tables, built on reel DeCaoUihav4 "6 decisions":
   01 one loud number per column · 02 more space between plans than inside · 03 one pick, one filled button
   04 raise the pick only · 05 old price next to the new one · 06 hover 150ms, price roll 300ms.
   Each card sets --acc (and optionally --glow). Tab/toggle clicks only touch the table, never the page. */
.tx { --tx-line: rgba(255,255,255,.09); --tx-card: rgba(255,255,255,.025); --tx-mute: #8d93a1; --tx-text: #eef0f4; margin-top: 2rem; }
.tx-toggle { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--tx-line); border-radius: 999px; background: rgba(255,255,255,.03); margin-bottom: 1.6rem; }
.tx-toggle button { font-weight: 600; font-size: .8125rem; line-height: 1; color: var(--tx-mute); background: none; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: background .15s, color .15s; }
.tx-toggle button[aria-pressed="true"] { background: rgba(255,255,255,.1); color: var(--tx-text); }
.tx-toggle .tx-save { font-size: .6875rem; color: #39d98a; margin-left: 6px; }
.tx-grid { display: grid; grid-template-columns: repeat(var(--tx-cols, 3), minmax(0, 1fr)); gap: 20px; align-items: start; padding-top: 18px; }
.tx-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--tx-line); border-radius: 18px; background: var(--tx-card); transition: transform .15s ease-out, box-shadow .15s ease-out, border-color .15s; }
.tx-card:hover { transform: translateY(-4px); }
.tx-card.pick { transform: translateY(-16px); border-color: var(--acc); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 10%, transparent), var(--tx-card) 60%); box-shadow: 0 24px 48px -12px rgba(0,0,0,.6), 0 0 32px -8px var(--glow, var(--acc)); }
.tx-card.pick:hover { transform: translateY(-20px); }
.tx-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-weight: 700; font-size: .625rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--on-acc, #fff); background: var(--acc); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.tx-name { font-weight: 700; font-size: .6875rem; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.tx-price { font-weight: 800; font-size: 2.75rem; line-height: 1; letter-spacing: -.02em; color: var(--tx-text); font-variant-numeric: tabular-nums; }
.tx-price small { font-weight: 500; font-size: .875rem; line-height: 1; color: var(--tx-mute); letter-spacing: 0; margin-left: 2px; }
.tx-sub { font-size: .8125rem; color: var(--tx-mute); line-height: 1.45; min-height: 2.3em; }
.tx-sub s { color: var(--tx-mute); opacity: .8; }
.tx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .875rem; color: #c9ccd4; line-height: 1.4; }
.tx-list li { position: relative; padding-left: 22px; }
.tx-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--acc); font-weight: 700; }
.tx-list li.tx-dim { color: var(--tx-mute); }
.tx-list li.tx-dim::before { content: "+"; }
.tx-btn { margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 10px; font-weight: 700; font-size: .875rem; line-height: 1; text-decoration: none; color: var(--tx-text); border: 1px solid var(--tx-line); background: transparent; cursor: pointer; transition: transform .1s, background .15s, border-color .15s; }
.tx-btn:hover { border-color: var(--acc); }
.tx-btn:active { transform: scale(.98); }
.tx-card.pick .tx-btn { background: var(--acc); border-color: var(--acc); color: var(--on-acc, #fff); box-shadow: 0 0 22px -6px var(--glow, var(--acc)); }
.tx-note { font-size: .75rem; color: var(--tx-mute); line-height: 1.5; margin: 0; }
.tx-roll { animation: tx-roll .3s ease-out; }
@keyframes tx-roll { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tx-card:focus-within { outline: 2px solid var(--acc); outline-offset: 3px; }
@media (max-width: 760px) {
  .tx-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tx-card.pick, .tx-card.pick:hover { transform: none; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .tx-card, .tx-card:hover, .tx-card.pick:hover { transition: none; }
  .tx-roll { animation: none; }
}
/* family only via var(): an undefined var just inherits the page font (font-family is inherited) */
.tx-price { font-family: var(--f-display); }

/* Gerb 11-04 09:13: $149 + $99 both red. Scoped to the Whop table: --t-prem is global, unscoped it turned GERBPRINT/GERBALGO prices red too. */
#tx-whop .tx-price { color: var(--t-prem); }

/* 11-04 Gerb: Founders = black & white like its Discord role (#333333 -> #F0F0F0) and Opptfine (mono, hairlines, white button / black text). No red. */
.tx-card.tx-fd { --acc: #F0F0F0; --on-acc: #0A0A0A; --glow: rgba(240,240,240,.28); border-color: #2c2c2c; background: linear-gradient(180deg, #141414, #0a0a0a); }
.tx-card.tx-fd .tx-name { background: linear-gradient(90deg, #F0F0F0, #8a8a8a 70%, #333333); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tx-card.tx-fd .tx-btn { background: #F0F0F0; border-color: #F0F0F0; color: #0A0A0A; }
.tx-card.tx-fd .tx-btn:hover { background: #d9d9d9; }