/* Squares-first marketing. Scoped so pool and management workspaces stay unchanged. */
.club-hero, .club-section, .club-proof, .club-final-cta { --club-green: #173e35; --club-ink: #223a31; --club-paper: #f6f5ee; max-width: 1360px; margin: 0 auto; color: var(--club-ink); }
.club-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); padding: 64px 5% 72px; align-items: center; }
.club-hero h1 { font-size: clamp(44px, 4.7vw, 70px); line-height: 1.02; letter-spacing: -.065em; margin: 22px 0; }
.club-hero h1 span { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-style: italic; letter-spacing: -.06em; }
.club-hero .eyebrow, .club-section .eyebrow, .club-final-cta .eyebrow { color: #4b6257; letter-spacing: .12em; font-size: 10px; }
.club-lead { font-size: 18px; line-height: 1.65; max-width: 480px; color: #526056; }
.club-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 18px; }
.club-button { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 15px 24px; font-weight: 700; font-size: 13px; text-decoration: none; }
.club-button-outline { border: 1px solid #89978b; color: var(--club-green); background: transparent; }
.club-join { font-size: 13px; }
.club-join a, .club-footnote a { color: inherit; text-underline-offset: 3px; }
.club-benefits { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; margin-top: 32px; }
.club-benefits li::before { content: '✓'; margin-right: 5px; color: #29624f; }
.club-access { font-size: 11px; line-height: 1.6; color: #657065; max-width: 430px; }
.club-demo { padding: 24px; background: #fffef8; border: 1px solid #d7ddcf; border-radius: 20px; box-shadow: 0 22px 60px #173e3510; min-width: 0; scroll-margin-top: 110px; }
.club-demo-heading, .club-desk-preview > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.club-demo-heading h2 { font-size: 24px; letter-spacing: -.04em; margin: 7px 0 20px; }
.club-tag { display: inline-block; font-size: 9px; font-weight: 750; letter-spacing: .07em; line-height: 1.5; border: 1px solid #abb9a7; border-radius: 4px; padding: 5px 8px; }
.club-demo-tabs { display: grid; grid-template-columns: .8fr .8fr .8fr 1.3fr; gap: 4px; margin-bottom: 14px; }
.club-demo-tabs button { background: #ecefe5; color: #455749; border: 1px solid transparent; border-radius: 7px; padding: 10px 3px; font-size: 10px; min-height: 38px; }
.club-demo-tabs button[aria-pressed='true'] { color: #fffef8; background: var(--club-green); }
.club-board { padding: 15px; border-radius: 10px; background: var(--club-green); color: #fffef8; }
.club-board-stage { position: relative; isolation: isolate; perspective: 1100px; padding: 30px 20px 38px; }
.club-board-stage::before { content: ''; position: absolute; z-index: -1; inset: 8% 0; border: 1px solid #dce0cd; border-radius: 50%; background: radial-gradient(ellipse, #d8e8a77a, transparent 68%); transform: rotate(-28deg) scaleY(.8); pointer-events: none; }
.club-board-stage .club-board { position: relative; border: 1px solid #46604d; transform: rotateY(var(--board-rotate-y, -10deg)) rotateX(var(--board-rotate-x, 7deg)) rotateZ(7deg); box-shadow: 18px 35px 50px #3c46212b, 4px 6px 0 #102a23; transition: transform .25s ease-out; }
/* Keep controls still and flatten the board during keyboard box selection. */
.club-board-stage .club-board:focus-within { transform: none; }
.club-scoreline { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 9px; letter-spacing: .05em; margin-bottom: 10px; }
.club-scoreline strong { font-size: 22px; margin-left: 5px; }
.club-scoreline > span:nth-child(2) { color: #c0ccba; font-size: 8px; }
.club-board .preview-grid { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; width: 100%; padding: 0; transform: none; }
.club-board .club-square, .club-board .club-axis { display: flex; justify-content: center; align-items: center; min-width: 0; aspect-ratio: 1.2; border-radius: 3px; padding: 0; font-size: 9px; font-weight: 650; line-height: 1; border: 0; background: #335449; color: #eff3e6; box-shadow: none; }
.club-board .club-axis { background: transparent; color: #d7f2ac; font-weight: 800; }
.club-board .club-square-open { background: #24483d; color: #aebdaf; }
.club-board button.club-square-open { border: 1px solid #668373; color: #f5f6ec; cursor: pointer; }
.club-board .club-square-mine, .club-board .club-square-winner { background: #d6f65a; color: #183d2e; outline: 2px solid #fff9c8; outline-offset: 0; }
.club-board .club-square-winner::after { content: '★'; font-size: 7px; margin-left: 1px; }
.club-demo-detail { min-height: 112px; padding-top: 18px; }
.club-demo-detail strong { font-size: 14px; line-height: 1.4; }
.club-demo-detail p { font-size: 12px; color: #546458; line-height: 1.65; margin: 8px 0; }
.club-demo-note { border-top: 1px solid #dce2d5; padding-top: 12px; margin-bottom: 0; font-size: 10px; color: #637062; line-height: 1.5; }
.club-proof { padding: 24px 5%; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; align-items: center; gap: 24px; border-top: 1px solid #d9ddcf; border-bottom: 1px solid #d9ddcf; background: #eeeee4; }
.club-proof p { margin: 0; font-size: 10px; letter-spacing: .035em; line-height: 1.7; }
.club-proof p strong { font-size: 13px; letter-spacing: 0; }
.club-proof > span { font-size: 11px; line-height: 1.8; color: #566052; }
.club-proof > span strong { color: var(--club-green); }
.club-section { padding: 76px 5%; }
.club-section h2, .club-final-cta h2 { font-size: clamp(34px, 3.8vw, 54px); letter-spacing: -.055em; line-height: 1.06; margin: 15px 0 22px; }
.club-section-heading { display: flex; justify-content: space-between; gap: 36px; align-items: end; margin-bottom: 32px; }
.club-section-heading > p { max-width: 330px; color: #59665a; font-size: 14px; line-height: 1.7; margin-bottom: 22px; }
.club-section-heading > a { margin-bottom: 22px; white-space: nowrap; }
.club-format-grid, .club-upgrade-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.club-format-card { display: flex; flex-direction: column; align-items: start; padding: 22px; border-radius: 12px; border: 1px solid #d5ddce; background: #f7f7ef; }
.club-format-card .club-tag { font-size: 8px; }
.club-format-art { display: block; font-family: Georgia, serif; font-size: 49px; letter-spacing: -.06em; margin: 34px 0 22px; color: #587159; }
.club-format-card h3, .club-workflow h3, .club-upgrade-grid h3 { font-size: 19px; letter-spacing: -.03em; line-height: 1.2; margin: 0 0 12px; }
.club-format-card p, .club-workflow li p, .club-upgrade-grid p { font-size: 13px; line-height: 1.65; color: #59665a; }
.club-format-note { font-size: 10px; line-height: 1.5; margin-top: auto; padding: 16px 0; color: #53634d; }
.club-format-card button { border-radius: 7px; padding: 12px 10px; font-size: 11px; width: 100%; background: #e2e9d8; color: var(--club-green); }
.club-format-featured { background: var(--club-green); color: #fffef8; border-color: var(--club-green); }
.club-format-featured p, .club-format-featured .club-format-note { color: #d6dfce; }
.club-format-featured .club-format-art { color: #d6f65a; }
.club-format-featured button { background: #d6f65a; }
.club-footnote { font-size: 12px; line-height: 1.7; color: #5b695c; }
.club-workflow { border-top: 1px solid #d9ddcf; }
.club-workflow-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.club-workflow li { border-top: 2px solid #254c3e; padding-top: 22px; }
.club-workflow li > span { font-size: 10px; font-weight: 700; letter-spacing: .1em; display: block; margin-bottom: 24px; }
.club-organizer-story { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: center; background: #e9ece1; }
.club-organizer-story > div > p { line-height: 1.7; font-size: 15px; max-width: 460px; }
.club-desk-preview { background: #fffef8; border: 1px solid #d5ddce; border-radius: 12px; padding: 28px; }
.club-desk-preview h3 { font-size: 21px; letter-spacing: -.03em; }
.club-desk-preview ul { padding: 0; list-style: none; }
.club-desk-preview li { padding: 15px 0; border-bottom: 1px solid #e2e7d9; font-size: 12px; display: flex; justify-content: space-between; gap: 12px; }
.club-desk-preview > p { font-size: 11px !important; color: #657061; }
#plans { scroll-margin-top: 90px; }
.club-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.club-plan-card { border: 1px solid #bdcdb1; border-radius: 14px; padding: 32px; }
.club-plan-card h3 { font-size: 27px; letter-spacing: -.04em; margin: 22px 0 8px; }
.club-plan-card > p { font-size: 14px; line-height: 1.7; color: #556451; }
.club-price { display: flex; align-items: baseline; gap: 14px; margin: 25px 0; }
.club-price strong { font-size: 60px; line-height: 1; font-weight: 650; letter-spacing: -.06em; }
.club-price span { font-size: 13px; color: #53684b; }
.club-plan-card ul { padding-left: 18px; font-size: 13px; line-height: 2; }
.club-plan-card .club-footnote { font-size: 12px; }
.club-plan-status { display: inline-block; border-top: 1px solid #b5c5a8; width: 100%; padding-top: 16px; margin-top: 12px; font-size: 11px; font-weight: 650; }
.club-plan-annual { background: #e3edc8; }
.club-plan-disclosure { padding: 24px 0 0; font-size: 12px; line-height: 1.65; }
.club-plan-disclosure p { margin: 4px 0; color: #61705e; }
.club-roadmap { border-top: 1px solid #d9ddcf; padding-top: 45px; }
.club-upgrade-grid article { border-left: 1px solid #cbd6c2; padding-left: 18px; }
.club-upgrade-grid article > span { display: block; color: #63755a; font-size: 11px; margin: 0 0 20px; }
.club-upgrade-grid h3 { font-size: 16px; }
.club-home-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; background: #eeeee4; }
.club-home-faq details { border-bottom: 1px solid #cbd4c2; padding: 20px 0; }
.club-home-faq summary { cursor: pointer; font-weight: 600; font-size: 14px; line-height: 1.4; }
.club-home-faq details p { font-size: 13px; line-height: 1.7; color: #53634d; }
.club-final-cta { text-align: center; padding: 76px 5%; background: var(--club-green); color: #fffef8; }
.club-final-cta .eyebrow { color: #c1d3af; }
.club-final-cta p:last-child { color: #cad8bb; font-size: 13px; margin-top: 24px; }
.club-hero :focus-visible, .club-section :focus-visible, .club-final-cta :focus-visible { outline: 3px solid #4f7d39; outline-offset: 4px; }
.club-board :focus-visible { outline-color: #fff; }
@media (max-width: 1100px) {
  .club-hero { gap: 28px; padding-top: 42px; }
  .club-hero h1 { font-size: 49px; }
  .club-demo { padding: 18px; }
  .club-format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .club-format-art { margin: 22px 0 15px; }
}
@media (max-width: 760px) {
  .club-board-stage { padding: 20px 8px 26px; }
  .club-board-stage .club-board { transform: rotateY(-6deg) rotateX(5deg) rotateZ(3deg); box-shadow: 10px 18px 28px #3c462126, 3px 4px 0 #102a23; }
  .club-hero { grid-template-columns: 1fr; padding: 36px 5% 40px; }
  .club-hero h1 { font-size: clamp(43px, 8.5vw, 62px); }
  .club-lead { font-size: 16px; max-width: 560px; }
  .club-hero-copy .eyebrow { font-size: 8px; }
  .club-demo { max-width: 520px; width: 100%; justify-self: center; }
  .club-proof { grid-template-columns: 1fr 1fr; gap: 18px; }
  .club-section { padding: 46px 5%; }
  .club-section-heading { display: block; margin-bottom: 24px; }
  .club-section-heading > p { max-width: none; }
  .club-workflow-grid, .club-organizer-story, .club-plan-grid, .club-home-faq { grid-template-columns: 1fr; gap: 26px; }
  .club-upgrade-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .club-workflow li > span { margin-bottom: 14px; }
  .club-plan-card { padding: 26px; }
  .club-price strong { font-size: 52px; }
  .club-home-faq h2 { margin-bottom: 0; }
  .club-desk-preview { padding: 20px; }
  .club-final-cta { padding: 52px 5%; }
}
@media (max-width: 420px) {
  .club-format-grid { grid-template-columns: 1fr; }
  .club-demo { padding: 12px; }
  .club-board { padding: 10px; }
  .club-board .preview-grid { gap: 2px; }
  .club-board .club-square, .club-board .club-axis { font-size: 8px; aspect-ratio: 1; }
  .club-demo-heading h2 { font-size: 21px; }
  .club-demo-heading .club-tag { font-size: 8px; }
  .club-benefits { gap: 9px; font-size: 10px; }
  .club-actions > * { width: 100%; }
  .club-desk-preview li { flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .club-board-stage .club-board { transform: none; }
  .club-hero, .club-section, .club-proof, .club-final-cta { animation: none !important; }
  .club-hero *, .club-section *, .club-final-cta * { transition: none !important; }
}