/* The Muck Club, free and Pro (muck-club.php): one grouped comparison list, not a card grid
   (docs/STYLE-GUIDE.md), tokens only. Prefix mcx-. */
body.mcx-page { margin: 0; background: var(--muck-bg); color: var(--muck-text); font-family: var(--muck-font); }
.mcx { max-width: 1080px; margin: 0 auto; padding: var(--muck-space-6) 32px var(--muck-space-7); }
.mcx-mock { margin: 0 0 var(--muck-space-6); padding: var(--muck-space-3) var(--muck-space-4); border: 1px dashed var(--muck-line-strong); border-radius: var(--muck-radius); color: var(--muck-text-3); font-size: 13px; }

.mcx-hero { margin-bottom: var(--muck-space-6); }
.mcx-hero h1 { margin: 0; font-size: clamp(36px, 5vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.mcx-hero h1 em { font-style: normal; color: var(--muck-gold); }
.mcx-lede { max-width: 620px; margin: var(--muck-space-4) 0 0; color: var(--muck-text-2); font-size: 18px; line-height: 1.55; }

/* the two tiers across the top, then every row under them */
.mcx-head, .mcx-row { display: grid; grid-template-columns: minmax(0, 1fr) 230px 230px; }
.mcx-head { position: sticky; top: 73px; z-index: 2; background: var(--muck-bg); border-bottom: 1px solid var(--muck-line); }
.mcx-tier { display: grid; justify-items: center; align-content: start; gap: var(--muck-space-1); padding: var(--muck-space-5) var(--muck-space-4); text-align: center; }
.mcx-tier--gold { background: color-mix(in srgb, var(--muck-gold) 9%, transparent); border-radius: var(--muck-radius-lg) var(--muck-radius-lg) 0 0; box-shadow: inset 0 2px 0 var(--muck-gold); }
.mcx-tier-name { color: var(--muck-text-2); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mcx-tier--gold .mcx-tier-name { color: var(--muck-gold); }
.mcx-tier-price { font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.mcx-tier-price small { font-size: 16px; font-weight: 600; color: var(--muck-text-2); }
.mcx-tier-note { color: var(--muck-text-3); font-size: 13px; margin-bottom: var(--muck-space-3); }
.mcx-tier .mk-btn { width: 100%; box-sizing: border-box; justify-content: center; }

.mcx-worth { margin: 0; padding: var(--muck-space-4) 0; color: var(--muck-text-2); font-size: 15px; border-bottom: 1px solid var(--muck-line); }
.mcx-worth b { color: var(--muck-gold); }

.mcx-group h2 { margin: 0; padding: var(--muck-space-6) 0 var(--muck-space-3); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muck-text-2); border-bottom: 1px solid var(--muck-line); }
.mcx-row { align-items: center; border-bottom: 1px solid var(--muck-line); min-height: 64px; }
.mcx-what { display: grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:12px; padding: var(--muck-space-3) var(--muck-space-4) var(--muck-space-3) 0; }
.mcx-feature-copy {display:grid;gap:2px;min-width:0}
.mcx-feature-icon {transform:translateY(var(--icon-offset,0px));display:block;width:48px;height:48px;background-image:url("muck-club/feature-icons-v1.webp");background-size:600% 400%;background-position:var(--icon-x) var(--icon-y);mask-image:radial-gradient(ellipse,#000 50%,transparent 73%);}
.mcx-feature-icon--side {background-image:url("muck-club/side-game-icons-v1.webp");background-size:300% 100%;background-position:var(--icon-x) 0}   /* the Nit Game, Red or Black, the two together */
.mcx-what b { font-size: 15px; font-weight: 700; }
.mcx-what span { color: var(--muck-text-3); font-size: 13px; line-height: 1.45; }
.mcx-cell { display: flex; align-items: center; justify-content: center; gap: var(--muck-space-2); align-self: stretch; padding: var(--muck-space-3); font-size: 14px; text-align: center; }
.mcx-cell--gold { background: color-mix(in srgb, var(--muck-gold) 9%, transparent); }
.mcx-cell--yes { color: var(--muck-text); font-weight: 600; }
.mcx-cell--yes::before { content: ""; flex: none; width: 5px; height: 10px; margin-top: -3px; border: solid var(--muck-green); border-width: 0 2px 2px 0; transform: rotate(45deg); }   /* a drawn check, not a font glyph */
.mcx-cell--gold.mcx-cell--yes::before { border-color: var(--muck-gold); }
.mcx-cell--unlock { color: var(--muck-gold-muted); font-weight: 600; }
.mcx-cell--limit { color: var(--muck-text-2); }
.mcx-cell--no { color: var(--muck-text-3); }

.mcx-fine { margin-top: var(--muck-space-6); display: grid; gap: var(--muck-space-2); color: var(--muck-text-3); font-size: 13px; line-height: 1.6; }
.mcx-fine p { margin: 0; }
.mcx-fine b { color: var(--muck-text-2); }

@media (max-width: 719px) {
  .mcx { padding: var(--muck-space-5) 16px var(--muck-space-6); }
  .mcx-hero { text-align: center; }
  .mcx-lede { margin-left: auto; margin-right: auto; font-size: 16px; }
  /* phones: the two tiers side by side, each row's name above its two cells */
  .mcx-head { grid-template-columns: 1fr 1fr; top: 62px; }
  .mcx-head-what { display: none; }
  .mcx-tier { padding: var(--muck-space-4) var(--muck-space-2); }
  .mcx-tier-price { font-size: 28px; }
  .mcx-row { grid-template-columns: 1fr 1fr; }
  .mcx-what { grid-column: 1 / -1; padding: var(--muck-space-3) 0 var(--muck-space-2); text-align: left; }
  .mcx-cell { padding: var(--muck-space-2) var(--muck-space-2) var(--muck-space-3); font-size: 13px; align-self: stretch; }
  .mcx-worth { text-align: center; }
}

/* the free column's actions (muck-club.php): buy a single unlock, or open the gallery for avatars and skins */
.mcx-buy, .mcx-browse { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 var(--muck-space-3); border: 1px solid var(--muck-gold-muted); border-radius: var(--muck-radius-btn); background: transparent; color: var(--muck-gold); font: 600 13px/1.2 var(--muck-font); text-decoration: none; cursor: pointer; }
.mcx-buy:hover, .mcx-browse:hover { border-color: var(--muck-gold); }
.mcx-buy[data-sure] { background: var(--muck-gold-cta); color: var(--muck-gold-ink); border-color: var(--muck-gold-cta); }
.mcx-buy:disabled { opacity: .6; cursor: default; }
.mcx-toast { position: fixed; left: 50%; bottom: var(--muck-space-5); transform: translateX(-50%); z-index: 50; margin: 0; padding: var(--muck-space-3) var(--muck-space-4); border: 1px solid var(--muck-line-strong); border-radius: var(--muck-radius); background: var(--muck-surface-2); color: var(--muck-text); font-size: 14px; }
.mcx-toast[hidden] { display: none; }

/* the hero: the copy and the black Pro card side by side (assets/black-card.css), stacked on phones */
.mcx-hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: center; gap: var(--muck-space-6); }
.mcx-hero-copy { position: relative; z-index: 3; }   /* moved down over the price boxes' empty first cell (muck-club.php): drawn above that row, whose sticky head is z-index 2 */
.mcx-card-stage { text-align: left; }
.mcx-card-stage .black-member-card { width: 100%; box-sizing: border-box; box-shadow: 0 40px 60px #000b; border-color: #847455; transform: rotate(-3deg); outline: 1px solid transparent; backface-visibility: hidden; }   /* the transparent outline makes Chrome smooth the tilted edges instead of stair-stepping them (Shaun, 2026-10-29: "cards edges look pixellated") */
.mcx-card-stage .black-member-card .pass-number { font-size: 4cqw; }
@media (max-width: 899px) {
  .mcx-hero { grid-template-columns: 1fr; justify-items: center; }
  .mcx-card-stage { width: min(100%, 340px); }
  .mcx-card-stage .black-member-card { transform: none; }
}
/* MuckDialog's icon on this page (Go Pro's plan picker): the icon font's class rule lives only under the header (site-header.css) */
.mcx-page .md-icon.material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; letter-spacing: normal; text-transform: none; white-space: nowrap; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; }