/* Page layer for the Pro Shop teaser. Builds on modernist.css (the design
   system) and only adds layout; colors, type and spacing come from its tokens. */

/* Court Green accent — replaces the system's red ramp. */
:root {
  --color-accent: oklch(0.50 0.13 152);
  --color-accent-100: oklch(0.96 0.03 152);
  --color-accent-200: oklch(0.92 0.05 152);
  --color-accent-300: oklch(0.86 0.08 152);
  --color-accent-400: oklch(0.72 0.11 152);
  --color-accent-500: oklch(0.58 0.13 152);
  --color-accent-600: oklch(0.44 0.12 152);
  --color-accent-700: oklch(0.40 0.11 152);
  --color-accent-800: oklch(0.32 0.09 152);
  --color-accent-900: oklch(0.24 0.06 152);
}

body { margin: 0; background: var(--color-bg); }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-700); }
a.btn-primary:hover { color: var(--color-bg); }

.page { min-height: 100vh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
.frame { max-width: 1280px; margin: 0 auto; border-left: 2px solid var(--color-divider); border-right: 2px solid var(--color-divider); }
.tld { color: var(--color-accent); }
.muted { color: var(--color-neutral-700); }
.btn-lg { padding: 12px 18px; font-size: 15px; }
.btn-left { justify-content: flex-start; }
.eyebrow { margin: 0 0 12px; color: var(--color-accent-700); }
.section-title { font-size: clamp(28px, 3.4vw, 44px); margin: 0; letter-spacing: -0.025em; text-wrap: balance; }
.section-text { margin: 0; font-size: 16px; max-width: 32em; text-wrap: pretty; }
.rule-b { border-bottom: 2px solid var(--color-divider); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

/* — name candidates bar — */
.namebar { background: var(--color-text); color: var(--color-bg); padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; }
.namebar[hidden] { display: none; }
.namebar-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.namebar-options { display: flex; border: 1px solid color-mix(in srgb, var(--color-bg) 40%, transparent); }
.namebar-opt { font: inherit; font-weight: 600; font-size: 13px; padding: 6px 12px; border: 0; cursor: pointer; background: transparent; color: var(--color-bg); text-align: left; }
.namebar-opt:hover { background: color-mix(in srgb, var(--color-bg) 12%, transparent); }
.namebar-opt[aria-pressed="true"] { background: var(--color-bg); color: var(--color-text); }
.namebar-note { opacity: 0.75; }

/* — nav — */
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 16px 24px; border-bottom: 2px solid var(--color-divider); }
.site-brand { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin-right: auto; }
.navlink, .navlink:hover { color: inherit; text-decoration: none; font-size: 14px; }
.navlink:hover { text-decoration: underline; }

/* — hero — */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); border-bottom: 2px solid var(--color-divider); }
.hero-copy { padding: 56px 32px 40px 24px; display: flex; flex-direction: column; gap: 24px; border-right: 2px solid var(--color-divider); }
.tag-row, .cta-row { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-title { font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.hero-lede { font-size: 18px; line-height: 1.5; margin: 0; max-width: 34em; text-wrap: pretty; }
.cta-row .btn-primary { min-width: 200px; justify-content: flex-start; }
.hero-founder { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--color-divider); display: flex; gap: 16px; align-items: center; }
.hero-founder img { width: 56px; height: 56px; flex: none; object-fit: cover; object-position: 52% 18%; filter: grayscale(1); display: block; }
.hero-founder-text { font-size: 14px; line-height: 1.4; }

/* — virtual coach — */
.coach-wrap { padding: 32px 24px; background: var(--color-surface); display: flex; flex-direction: column; }
.coach { border: 2px solid var(--color-text); background: var(--color-bg); display: flex; flex-direction: column; flex: 1; min-height: 520px; }
.coach-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 2px solid var(--color-text); }
.coach-dot { width: 10px; height: 10px; background: var(--color-accent); }
.coach-title { font-weight: 800; font-size: 16px; }
.coach-badge { margin-left: auto; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.coach-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; max-height: 440px; }
.msg-user { align-self: flex-end; max-width: 82%; background: var(--color-text); color: var(--color-bg); padding: 10px 14px; font-size: 14px; line-height: 1.45; }
.msg-coach { max-width: 92%; display: flex; flex-direction: column; gap: 10px; }
.msg-coach-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); }
.msg-coach-text { font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.product { border: 1px solid var(--color-divider); padding: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--color-surface); }
.product-kind { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }
.product-name { font-weight: 600; font-size: 13px; line-height: 1.3; }
.product-why { font-size: 12px; color: var(--color-neutral-700); }
.coach-foot { padding: 12px 16px; border-top: 1px solid var(--color-divider); display: flex; flex-direction: column; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: 12px; padding: 6px 10px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); cursor: pointer; text-align: left; }
.chip:hover { background: var(--color-accent-100); border-color: var(--color-accent); }
.chip:active { background: var(--color-accent-200); }
.coach-form { display: flex; gap: 0; }
.coach-form .input { flex: 1; border-right: 0; }
.coach-form .btn { min-width: 80px; justify-content: flex-start; }

/* — audience lanes — */
.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); border-bottom: 2px solid var(--color-divider); }
.lane, .lane:hover { padding: 20px 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px; }
.lane + .lane { border-left: 2px solid var(--color-divider); }
.lane:hover { background: var(--color-surface); }
.lane-kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }
.lane-title { font-weight: 800; font-size: 18px; }

/* — founder — */
.founder-photo { border-right: 2px solid var(--color-divider); min-height: 420px; position: relative; overflow: hidden; }
.founder-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 30%; filter: grayscale(1) contrast(1.05); display: block; max-width: none; }
.founder-body { padding: 48px 24px; display: flex; flex-direction: column; gap: 20px; }
.founder-body .eyebrow { margin: 0; }
.founder-quote { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; margin: 0; text-wrap: pretty; }
.founder-sig { font-size: 14px; }
.founder-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--color-divider); margin-top: 8px; }
.founder-facts > div:first-child { padding: 14px 12px 0 0; border-right: 1px solid var(--color-divider); }
.founder-facts > div:last-child { padding: 14px 0 0 12px; }
.fact-title { font-weight: 800; font-size: 15px; }
.fact-body { font-size: 13px; color: var(--color-neutral-700); }

/* — section heads and cell rows — */
.section-head { padding: 48px 24px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px 48px; align-items: end; }
.section-head-plain { padding: 48px 24px 24px; }
.cells { display: grid; border-top: 2px solid var(--color-divider); }
.cells-240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.cells-280 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cell { padding: 24px; border-right: 1px solid var(--color-divider); display: flex; flex-direction: column; gap: 8px; }
.cell-body { font-size: 14px; color: var(--color-neutral-800); text-wrap: pretty; }

.category { min-height: 180px; }
.category-num { font-size: 12px; color: var(--color-accent-700); font-weight: 600; }
.category-title { font-weight: 800; font-size: 19px; line-height: 1.2; }

.step { padding: 28px 24px; gap: 10px; }
.step-num { font-weight: 800; font-size: 48px; line-height: 1; color: var(--color-accent); }
.step-title { font-weight: 800; font-size: 20px; }

/* — local — */
.local-copy { padding: 48px 24px; border-right: 2px solid var(--color-divider); }
.local-copy .section-title { margin: 0 0 16px; }
.regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.region { padding: 24px; border-bottom: 1px solid var(--color-divider); border-right: 1px solid var(--color-divider); display: flex; flex-direction: column; justify-content: flex-end; min-height: 120px; }
.region-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); }
.region-name { font-weight: 800; font-size: 22px; }

/* — waitlist — */
.waitlist { padding: 48px 24px; border-bottom: 2px solid var(--color-divider); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px 48px; align-items: end; }
.waitlist-form { display: flex; flex-direction: column; gap: 10px; }
.waitlist-form[hidden], .waitlist-done[hidden] { display: none; }
.waitlist-row { display: flex; gap: 0; flex-wrap: wrap; }
.waitlist-row .input { flex: 1 1 220px; min-height: 48px; font-size: 15px; border-right: 0; }
.waitlist-row .btn { min-height: 48px; min-width: 180px; justify-content: flex-start; font-size: 15px; }
.consent { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; cursor: pointer; }
.consent input { width: 16px; height: 16px; margin: 1px 0 0; flex: none; accent-color: var(--color-accent); }
.waitlist-note { font-size: 12px; color: var(--color-neutral-700); }
.waitlist-error { font-size: 13px; font-weight: 600; }
.waitlist-error:empty { display: none; }
.waitlist-done { border: 2px solid var(--color-accent); padding: 16px; font-weight: 600; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* — clubs — */
.clubs-cta { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.clubs-cta .btn { min-width: 220px; }
.club-feature { background: var(--color-surface); }
.club-feature-title { font-weight: 800; font-size: 18px; }

/* — partners — */
.partners { background: var(--color-accent); color: var(--color-bg); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.partners-copy { padding: 56px 24px; display: flex; flex-direction: column; gap: 20px; border-right: 2px solid color-mix(in srgb, var(--color-bg) 35%, transparent); }
.partners-copy h6 { margin: 0; color: var(--color-bg); opacity: 0.85; }
.partners-statement { font-size: clamp(26px, 3vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; margin: 0; text-wrap: pretty; }
.partners-text { margin: 0; font-size: 16px; max-width: 34em; }
.partners-cta, .partners-cta:hover { align-self: flex-start; background: var(--color-bg); color: var(--color-text); text-decoration: none; font-weight: 800; font-size: 15px; padding: 12px 18px; min-width: 240px; }
.partners-cta:hover { background: var(--color-neutral-200); }
.partners-cta:active { background: var(--color-neutral-300); }
.partners-list { display: flex; flex-direction: column; }
.integration { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 18px 24px; border-bottom: 1px solid color-mix(in srgb, var(--color-bg) 35%, transparent); }
.integration-k { font-weight: 800; font-size: 16px; }
.integration-v { font-size: 14px; line-height: 1.45; }

/* — footer — */
.site-footer { padding: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; border-top: 2px solid var(--color-divider); }
.site-footer .footer-brand { font-weight: 800; }
.site-footer .copy { margin-left: auto; }