.club-page { max-width: 1240px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 48px) 70px; }
.club-hero { display: grid; gap: 24px; align-items: end; padding: 38px 0 30px; border-bottom: 1px solid var(--line); }
.club-hero h1 { max-width: 780px; margin: 6px 0 12px; font-size: clamp(36px, 6vw, 68px); line-height: 1; }
.club-hero p { max-width: 720px; color: var(--muted); }
.club-identity { min-width: 250px; padding: 18px; color: white; background: #0a2f4f; border-left: 5px solid var(--yellow); }
.club-identity span, .club-identity strong, .club-identity small { display: block; }
.club-identity strong { margin: 3px 0; font-size: 22px; }
.club-status { display: grid; gap: 12px; padding: 24px 0; }
.club-status article { min-height: 142px; padding: 20px; background: white; border: 1px solid var(--line); border-top: 4px solid var(--green); }
.club-status span, .club-status strong, .club-status small { display: block; }
.club-status span { color: var(--muted); font-weight: 700; }
.club-status strong { margin: 8px 0; font-size: 28px; }
.club-status strong b { font: inherit; }
.checkin-panel { background: #fff8dc !important; border-top-color: #e9ad17 !important; }
.club-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 0; padding: 0 18px; color: white; background: var(--green); font: inherit; font-weight: 800; cursor: pointer; }
.club-button:disabled { cursor: not-allowed; opacity: .5; }
.club-message { min-height: 24px; margin: 0 0 12px; font-weight: 700; color: var(--green); }
.club-section { padding: 34px 0; border-top: 1px solid var(--line); }
.club-section h2, .club-terms h2 { margin: 5px 0 10px; font-size: clamp(27px, 4vw, 42px); }
.referral-section { display: grid; gap: 28px; }
.referral-section > div > p:not(.eyebrow), .club-heading > p { color: var(--muted); }
.referral-tool { padding: 20px; background: white; border: 1px solid var(--line); }
.referral-tool label { display: block; margin-bottom: 8px; font-weight: 800; }
.referral-tool > div { display: grid; grid-template-columns: 1fr auto; }
.referral-tool input { min-width: 0; height: 46px; padding: 0 12px; border: 1px solid #bfcac5; font: inherit; }
.referral-tool button { border: 0; padding: 0 18px; color: white; background: #0a2f4f; font-weight: 800; }
.whatsapp-share { margin-top: 12px; width: 100%; }
.club-heading { display: grid; gap: 12px; margin-bottom: 20px; }
.reward-grid, .earn-grid { display: grid; gap: 14px; }
.reward-card, .earn-grid article { padding: 20px; background: white; border: 1px solid var(--line); }
.reward-card h3 { margin: 7px 0; font-size: 21px; }
.reward-card p { min-height: 48px; color: var(--muted); }
.reward-card .cost { color: #0a2f4f; font-size: 25px; font-weight: 900; }
.reward-card button { width: 100%; margin-top: 14px; }
.earn-grid article strong, .earn-grid article span, .earn-grid article small { display: block; }
.earn-grid article strong { color: var(--green); font-size: 28px; }
.earn-grid article span { margin: 5px 0; font-weight: 800; }
.earn-grid article small { color: var(--muted); }
.club-terms { padding: 26px; background: #eef3ef; border-left: 5px solid var(--green); }
.club-terms p { margin-bottom: 0; color: var(--muted); }
@media (min-width: 720px) { .club-hero { grid-template-columns: 1fr auto; } .club-status { grid-template-columns: repeat(2, 1fr); } .referral-section { grid-template-columns: 1.1fr .9fr; } .reward-grid { grid-template-columns: repeat(3, 1fr); } .earn-grid { grid-template-columns: repeat(3, 1fr); } .club-heading { grid-template-columns: 1fr 1fr; align-items: end; } }
@media (min-width: 1050px) { .club-status { grid-template-columns: repeat(4, 1fr); } .earn-grid { grid-template-columns: repeat(5, 1fr); } }