/* One vs Many AI Club: layout on 1vsM brand tokens (assets/css/brand-tokens.css).
   Vanilla CSS, mobile-first (320px base). Every var() has a literal fallback. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.club {
  margin: 0;
  background: var(--bg-dark, #0A0A0A);
  color: var(--text-light, #F5F5F5);
  font-family: var(--font-body, 'Inter', system-ui, -apple-system, sans-serif);
  font-size: var(--text-base, 1rem);
  line-height: var(--leading-relaxed, 1.6);
  overflow-x: hidden;
}
.club img { max-width: 100%; height: auto; }
.club h1, .club h2, .club h3 {
  font-family: var(--font-heading, 'Outfit', system-ui, sans-serif);
  line-height: var(--leading-snug, 1.2);
  margin: 0 0 var(--space-3, 0.75rem);
  overflow-wrap: anywhere;
}
.club h1 { font-size: clamp(1.75rem, 7vw, 3rem); font-weight: var(--weight-bold, 700); }
.club h2 { font-size: var(--text-2xl, 1.5rem); font-weight: var(--weight-semibold, 600); }
.club h3 { font-size: var(--text-xl, 1.25rem); font-weight: var(--weight-semibold, 600); }
.club p { margin: 0 0 var(--space-4, 1rem); }
.club a { color: var(--primary, #D4AF37); }
.club a:hover { color: var(--primary-light, #F1D279); }
.club :focus-visible { outline: 2px solid var(--primary-light, #F1D279); outline-offset: 2px; }

.club-wrap { width: 100%; max-width: var(--container, 1200px); margin: 0 auto; padding: 0 var(--space-4, 1rem); }
.club-muted { color: var(--text-muted, #A0A0A0); }
.club-skip { position: absolute; left: -999px; top: 0; background: var(--primary, #D4AF37); color: var(--bg-darker, #050505); padding: var(--space-3, 0.75rem) var(--space-4, 1rem); z-index: 100; }
.club-skip:focus { left: var(--space-2, 0.5rem); top: var(--space-2, 0.5rem); }

/* Header: fixed, so .club-main clears it with padding-top >= 5rem */
.club-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--bg-darker, #050505);
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.10));
}
.club-header__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1, 0.25rem) var(--space-3, 0.75rem); min-height: 3.5rem; }
.club-lockup { display: inline-flex; align-items: center; gap: var(--space-2, 0.5rem); min-height: 44px; text-decoration: none; color: var(--text-light, #F5F5F5) !important; }
.club-lockup img { width: 32px; height: 32px; border-radius: var(--radius-sm, 4px); }
.club-lockup__name { font-family: var(--font-heading, 'Outfit', sans-serif); font-weight: var(--weight-bold, 700); }
.club-lockup__sub { color: var(--primary, #D4AF37); font-family: var(--font-heading, 'Outfit', sans-serif); font-weight: var(--weight-semibold, 600); }
.club-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1, 0.25rem); }
.club-nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 var(--space-3, 0.75rem); color: var(--text-light, #F5F5F5); text-decoration: none; font-size: var(--text-sm, 0.875rem); border-radius: var(--radius-base, 8px); }
.club-nav a:hover { color: var(--primary-light, #F1D279); background: var(--glass-bg-hover, rgba(255, 255, 255, 0.06)); }
.club-nav a:active { background: var(--glass-bg-active, rgba(255, 255, 255, 0.09)); }
.club-nav a[aria-current="page"] { color: var(--primary, #D4AF37); }
.club-nav .club-nav__login { color: var(--primary, #D4AF37); }

.club-main { padding-top: 5.5rem; min-height: 60vh; }
/* Below 360px the 5 nav links wrap to a 3rd row (137px header over the h1). Tighter padding keeps one row, 44px targets. */
@media (max-width: 22.5rem) { .club-nav { gap: 0; } .club-nav a { padding: 0 var(--space-2, 0.5rem); } }

/* Hero / sections */
.club-hero { padding: var(--space-8, 2rem) 0 var(--space-10, 2.5rem); }
.club-hero--short { padding-bottom: var(--space-6, 1.5rem); }
.club-eyebrow { color: var(--primary, #D4AF37); font-size: var(--text-sm, 0.875rem); letter-spacing: var(--tracking-wider, 0.06em); text-transform: uppercase; }
.club-lede { font-size: var(--text-lg, 1.125rem); color: var(--text-muted, #A0A0A0); max-width: 40rem; }
.club-section { padding: var(--space-8, 2rem) 0; }
.club-section--alt { background: var(--bg-darker, #050505); }
.club-prose { max-width: 44rem; }
.club-prose ul { padding-left: var(--space-5, 1.25rem); }
.club-prose li { margin-bottom: var(--space-2, 0.5rem); }

/* Cards: depth from elevated surface, not shadow */
.club-grid, .club-tiers { display: grid; grid-template-columns: 1fr; gap: var(--space-4, 1rem); }
.club-card { background: var(--neutral-700, #1A1A1A); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.10)); border-radius: var(--radius-lg, 12px); padding: var(--space-5, 1.25rem); min-width: 0; }
.club-card:hover { border-color: var(--glass-border-hover, rgba(212, 175, 55, 0.30)); }
.club-tier--featured { border-color: var(--glass-border-active, rgba(212, 175, 55, 0.50)); }
.club-link { display: inline-flex; align-items: center; min-height: 44px; }
.club-price { margin: var(--space-2, 0.5rem) 0; }
.club-price__n { font-family: var(--font-heading, 'Outfit', sans-serif); font-size: var(--text-4xl, 2.5rem); font-weight: var(--weight-bold, 700); }
.club-price__u { color: var(--text-muted, #A0A0A0); }
.club-list { list-style: none; margin: var(--space-4, 1rem) 0; padding: 0; }
.club-list li { padding: var(--space-1, 0.25rem) 0 var(--space-1, 0.25rem) var(--space-5, 1.25rem); position: relative; }
.club-list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.6rem; height: 2px; background: var(--primary, #D4AF37); }
.club-checkout { margin: 0 0 var(--space-2, 0.5rem); }

/* Buttons: default / hover / active / disabled / focus-visible */
.club-actions { display: flex; flex-wrap: wrap; gap: var(--space-3, 0.75rem); margin-top: var(--space-4, 1rem); }
.club-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: var(--space-2, 0.5rem) var(--space-5, 1.25rem); border-radius: var(--radius-base, 8px); border: 1px solid transparent; font: inherit; font-weight: var(--weight-semibold, 600); text-decoration: none; cursor: pointer; text-align: center; transition: background-color var(--motion-fast, 200ms) ease, border-color var(--motion-fast, 200ms) ease; }
.club-btn--block { display: flex; width: 100%; }
.club-btn--primary { background: var(--primary, #D4AF37); color: var(--bg-darker, #050505) !important; }
.club-btn--primary:hover { background: var(--primary-light, #F1D279); }
.club-btn--primary:active { background: var(--primary-dark, #A6891F); }
.club-btn--secondary { background: transparent; color: var(--primary, #D4AF37) !important; border-color: var(--glass-border-active, rgba(212, 175, 55, 0.50)); }
.club-btn--secondary:hover { background: var(--glass-bg-hover, rgba(255, 255, 255, 0.06)); border-color: var(--primary, #D4AF37); }
.club-btn--secondary:active { background: var(--glass-bg-active, rgba(255, 255, 255, 0.09)); }
.club-btn:disabled, .club-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Forms */
.club-label { display: block; font-size: var(--text-sm, 0.875rem); margin-bottom: var(--space-1, 0.25rem); }
.club-form__row { display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); }
.club-input { width: 100%; min-height: 44px; padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); font: inherit; font-size: 1rem; color: var(--text-light, #F5F5F5); background: var(--neutral-800, #0F0F0F); border: 1px solid var(--neutral-400, #757575); border-radius: var(--radius-base, 8px); }
.club-input:hover { border-color: var(--text-muted, #A0A0A0); }
.club-input:focus-visible { border-color: var(--primary, #D4AF37); }
.club-input:disabled { opacity: 0.5; cursor: not-allowed; }
.club-input[aria-invalid="true"] { border-color: var(--error, #FF6B6B); }
.club-form__status, .club-status { min-height: 1.5em; margin: var(--space-2, 0.5rem) 0 0; font-size: var(--text-sm, 0.875rem); }
.club-form__status[data-state="error"], .club-status[data-state="error"] { color: var(--error, #FF6B6B); }
.club-form__status[data-state="ok"], .club-status[data-state="ok"] { color: var(--success, #4CAF50); }
.club-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
.club-footer { margin-top: var(--space-10, 2.5rem); padding: var(--space-8, 2rem) 0; background: var(--bg-darker, #050505); border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.10)); }
.club-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6, 1.5rem); }
.club-footer__h { font-size: var(--text-xl, 1.25rem); }
.club-footer__links { display: flex; flex-direction: column; }
.club-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.club-disclaimer { margin-top: var(--space-6, 1.5rem); font-size: var(--text-sm, 0.875rem); color: var(--text-muted, #A0A0A0); }

@media (min-width: 40rem) {
  .club-wrap { padding: 0 var(--space-6, 1.5rem); }
  .club-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .club-form__row { flex-direction: row; }
  .club-form__row .club-btn { flex: 0 0 auto; }
}
@media (min-width: 60rem) {
  .club-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .club-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .club-footer__grid { grid-template-columns: 2fr 1fr; }
  .club-main { padding-top: 6rem; }
}
@media (prefers-reduced-motion: reduce) { .club-btn { transition: none; } }

/* Signup (/signup) */
.club-narrow { max-width: 28rem; }
.club-signup { display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); }
.club-signup .club-label { margin-top: var(--space-2, 0.5rem); }
.club-hint, .club-fineprint { margin: 0; font-size: var(--text-sm, 0.875rem); }
.club-field-error { margin: 0; font-size: var(--text-sm, 0.875rem); color: var(--error, #FF6B6B); }
.club-notice { margin: 0 0 var(--space-2, 0.5rem); padding: var(--space-3, 0.75rem); border: 1px solid var(--glass-border-hover, rgba(212, 175, 55, 0.30)); border-radius: var(--radius-base, 8px); background: var(--neutral-800, #0F0F0F); }
.club-check { display: flex; align-items: center; gap: var(--space-2, 0.5rem); min-height: 44px; margin: var(--space-2, 0.5rem) 0; cursor: pointer; }
.club-check input { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--primary, #D4AF37); }
.club-check input:focus-visible { outline: 2px solid var(--primary, #D4AF37); outline-offset: 2px; }