:root {
  --night: #171a32;
  --night-deep: #101328;
  --navy: #252946;
  --orange: #f47748;
  --orange-dark: #bf4922;
  --orange-action: #c54a21;
  --mint: #59ceb3;
  --ink: #20223b;
  --muted: #71778b;
  --border: #e6e8ee;
  --paper: #f7f8fb;
  --white: #ffffff;
  --display: "Syne", "Outfit", sans-serif;
  --body: "Outfit", "Segoe UI", sans-serif;
  --shadow: 0 28px 90px rgba(20, 24, 48, .13);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 16px/1.58 var(--body); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 5px; }
svg { display: block; }
.container { width: min(100% - 96px, 1260px); margin-inline: auto; }
.skip-link { position: absolute; z-index: 100; top: -70px; left: 20px; padding: 12px 18px; background: white; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.section-pad { padding: 116px 0; }

/* Header / brand */
.site-header { position: fixed; z-index: 20; width: 100%; left: 0; top: 0; background: rgba(23, 26, 50, .94); backdrop-filter: blur(14px); }
.nav-inner { height: 96px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; color: white; text-decoration: none; line-height: 0; }
.brand img { height: 42px; width: auto; display: block; }
.brand-mark { width: 34px; height: 38px; display: grid; place-items: center; color: var(--orange); }
.brand-mark svg { width: 28px; height: 32px; }
.brand-emphasis { color: #fff; }
.brand-dot { color: var(--orange); }
.main-nav { display: flex; align-items: center; gap: 36px; margin-left: 8vw; }
.main-nav a { text-decoration: none; color: #b8bbcb; font-size: 14px; font-weight: 600; transition: color .2s; }
.main-nav a:hover { color: #fff; }
.header-link { display: inline-flex; align-items: center; gap: 13px; padding: 11px 17px; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 100px; text-decoration: none; font-size: 13px; font-weight: 700; transition: background .2s, border-color .2s; white-space: nowrap; }
.header-link:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); }
.header-link svg, .button svg { width: 18px; height: 18px; }

/* Hero */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 790px; display: flex; align-items: center; color: white; background: radial-gradient(ellipse at 83% 38%, #30365a 0%, #1b1e39 33%, var(--night-deep) 74%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.02) 1px, transparent 1px); background-size: 92px 92px; mask-image: linear-gradient(to right, transparent, #000 58%); }
.hero-glow { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(2px); }
.hero-glow-one { width: 630px; height: 630px; right: -220px; top: -240px; background: radial-gradient(circle, rgba(244,119,72,.14), transparent 63%); }
.hero-glow-two { width: 640px; height: 640px; left: -380px; bottom: -320px; background: radial-gradient(circle, rgba(89,206,179,.07), transparent 65%); }
.hero-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 26px; align-items: center; padding-top: 140px; padding-bottom: 105px; }
.hero-copy { position: relative; z-index: 3; padding-top: 16px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.eyebrow-light { color: #c8c9d8; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(244,119,72,.12); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); }
h1 { margin: 25px 0 24px; max-width: 650px; font-size: clamp(55px, 5.25vw, 82px); line-height: 1.03; letter-spacing: -.075em; font-weight: 800; }
h1 > span:not(.headline-period) { color: var(--orange); }
.headline-period { color: var(--orange); }
.hero-description { max-width: 480px; color: #bfc1d1; line-height: 1.7; font-size: 17px; margin-bottom: 30px; }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.button { min-height: 53px; padding: 0 22px; display: inline-flex; justify-content: center; align-items: center; gap: 18px; border-radius: 11px; font-weight: 700; font-size: 14px; text-decoration: none; transition: transform .22s, background .22s, box-shadow .22s; white-space: nowrap; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: white; background: var(--orange-action); box-shadow: 0 12px 30px rgba(244,119,72,.21); }
.button-primary:hover { background: #a93d1a; }
.button-outline { color: #f8f8fb; border: 1px solid #64667d; background: rgba(255,255,255,.025); }
.button-outline:hover { background: rgba(255,255,255,.09); }
.hero-footnote { margin-top: 38px; display: flex; gap: 12px; align-items: center; color: #9499ad; font-size: 12px; }
.small-line { width: 27px; height: 1px; flex: none; background: var(--orange); }
.hero-bottom-line { height: 2px; width: 100%; position: absolute; bottom: 0; left: 0; background: linear-gradient(90deg, transparent, rgba(244,119,72,.6) 35%, rgba(89,206,179,.6) 72%, transparent); opacity: .55; }

/* Composed product previews; illustrations, not live app views */
.hero-visual { position: relative; width: 100%; min-height: 560px; perspective: 1100px; }
.scene-halo { position: absolute; width: 520px; height: 520px; border: 1px solid rgba(255,255,255,.065); border-radius: 50%; right: -10px; top: -10px; box-shadow: 0 0 0 65px rgba(255,255,255,.02), 0 0 0 128px rgba(255,255,255,.012); }
.scene-dots { position: absolute; width: 110px; height: 120px; right: 5%; bottom: 28px; opacity: .25; background: radial-gradient(circle, #cfd4e7 1.2px, transparent 1.5px) 0 0/16px 16px; }
.dashboard-preview { width: 91%; position: absolute; left: 5%; top: 75px; border-radius: 18px; overflow: hidden; background: #f6f7fb; box-shadow: 0 42px 90px rgba(0,0,0,.37), 0 0 0 1px rgba(255,255,255,.22); transform: rotate(-4deg); transform-origin: center; }
.preview-topbar { height: 48px; background: #fff; border-bottom: 1px solid #eceef4; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
.preview-logo { font-family: var(--display); color: #222745; font-size: 14px; font-weight: 800; letter-spacing: -.07em; }
.preview-logo span:not(.mini-bolt) { color: #f06e3f; }
.mini-bolt { color: var(--orange); margin-right: 5px; font-family: var(--body); font-size: 19px; }
.preview-top-actions { display: flex; align-items: center; gap: 12px; }
.preview-top-actions > span:not(.preview-avatar) { background: #e7e9ef; border-radius: 3px; width: 34px; height: 5px; }
.preview-top-actions > span:nth-child(2) { width: 23px; }
.preview-avatar { height: 24px; width: 24px; border-radius: 50%; display: grid; place-items: center; color: white; background: #3e4569; font-size: 10px; font-weight: 700; }
.preview-content { padding: 23px 21px 22px; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.preview-heading strong { display: block; color: #252942; font-family: var(--display); font-size: 22px; line-height: 1.2; }
.preview-caption { display: block; color: #8d93a4; font-size: 8px; font-weight: 800; letter-spacing: .13em; margin-bottom: 3px; }
.preview-date { padding: 6px 10px; border: 1px solid #e3e6ed; border-radius: 6px; color: #535b75; font-size: 9px; }
.preview-summary { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.summary-chip { color: #676f83; font-size: 9px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.summary-chip i { height: 6px; width: 6px; border-radius: 50%; background: var(--mint); }
.summary-switch { font-size: 9px; font-weight: 700; color: #4a5169; }
.schedule { display: grid; grid-template-columns: 50px repeat(3, 1fr); grid-template-rows: 30px repeat(3, 59px); gap: 5px; }
.schedule-cell { min-width: 0; padding: 8px; display: flex; flex-direction: column; justify-content: center; border-radius: 5px; color: #71788a; }
.schedule-cell.heading { color: #707789; text-align: center; display: block; font-size: 9px; font-weight: 700; padding-top: 4px; }
.schedule-cell.hour { font-size: 9px; text-align: right; align-items: flex-end; font-weight: 700; color: #9a9faf; }
.schedule-cell:not(.hour):not(.heading) { border: 1px solid transparent; }
.schedule-cell:not(.hour):not(.heading) span { font-size: 9px; font-weight: 700; line-height: 1.3; }
.schedule-cell:not(.hour):not(.heading) small { font-size: 7px; margin-top: 3px; opacity: .75; }
.schedule-cell.booked { background: #ffe6dd; border-color: #f9d8cb !important; color: #d36743; }
.schedule-cell.lesson { background: #e3dcfb; border-color: #dcd2f9 !important; color: #7763b8; }
.schedule-cell.available { background: #ecf8f4; border: 1px dashed #afe4d5 !important; color: #389b7f; }
.preview-legend { display: flex; justify-content: flex-end; gap: 14px; padding-top: 17px; }
.preview-legend span { display: flex; align-items: center; gap: 4px; color: #8a8f9e; font-size: 8px; }
.preview-legend i { width: 7px; height: 7px; border-radius: 2px; display: block; }
.legend-booked { background: #f4ad95; }.legend-lesson { background: #ac99e3; }.legend-available { background: #91d6c2; }
.phone-preview { position: absolute; z-index: 3; width: 224px; min-height: 400px; right: -2%; bottom: 10px; padding: 8px; overflow: hidden; border: 5px solid #222439; border-radius: 31px; box-shadow: 0 35px 70px rgba(0,0,0,.48), 0 0 0 1px #696d85; transform: rotate(7deg); background: #f9f9fc; }
.phone-notch { width: 62px; height: 15px; background: #222439; border-radius: 0 0 12px 12px; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 5; }
.phone-body { padding: 26px 11px 11px; color: #21243e; }
.phone-greeting { display: flex; justify-content: space-between; align-items: center; color: #9498a8; font-size: 9px; font-weight: 600; }
.phone-avatar { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #f8dbcf; color: #db6d46; font-weight: 800; }
.phone-title { font: 800 24px/1.04 var(--display); letter-spacing: -.065em; margin: 17px 0; }
.phone-title span { color: var(--orange); }
.match-card { border-radius: 13px; padding: 13px; background: #222643; color: white; box-shadow: 0 12px 26px rgba(20,24,48,.16); }
.match-top { display: flex; justify-content: space-between; align-items: center; }
.match-sport { color: #f8b194; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.match-live { color: #b1e3cc; font-size: 8px; }.match-live i { display: inline-block; background: #61d69c; width: 5px; height: 5px; border-radius: 50%; margin-right: 4px; }
.match-time { margin: 14px 0 0; font: 800 29px/1 var(--display); letter-spacing: -.06em; }.match-time small { font: 600 11px var(--body); color: #acafc4; }
.match-place { color: #b7b8c9; font-size: 9px; margin-top: 6px; }
.player-avatars { display: flex; align-items: center; margin-top: 19px; padding-left: 3px; }
.player-avatars > span { width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid #222643; border-radius: 50%; margin-left: -4px; background: #a3a6d0; color: #fff; font-size: 8px; font-weight: 700; }
.player-avatars > span:nth-child(2) { background: #c7a49d; }.player-avatars > span:nth-child(3) { background: #80ab9c; }
.player-avatars .free-player { background: transparent; border: 1px dashed #9398b6; color: #a8afce; font-size: 14px; }
.match-caption { color: #b2b5c6; font-size: 8px; margin-top: 6px; }
.phone-bottom { display: flex; justify-content: space-around; border-top: 1px solid #e9eaf1; color: #b5b7c4; font-size: 17px; margin-top: 20px; padding-top: 9px; }
.phone-bottom .phone-home { color: var(--orange); }
.scene-tag { position: absolute; z-index: 5; left: -2%; bottom: 25px; background: #fff; box-shadow: 0 15px 32px rgba(0,0,0,.24); border-radius: 12px; padding: 11px 15px; display: flex; align-items: center; gap: 10px; transform: rotate(-7deg); }
.scene-tag-icon { display: grid; place-items: center; width: 28px; height: 28px; background: #ddf8ee; color: #21a47b; border-radius: 50%; font-weight: 800; }
.scene-tag strong, .scene-tag small { display: block; }.scene-tag strong { font-size: 11px; color: #1e2944; line-height: 1.5; }.scene-tag small { font-size: 9px; color: #7c8394; line-height: 1.3; }
.visual-disclaimer { position: absolute; bottom: -46px; right: 8px; font-size: 10px; color: #868ca5; }

/* sports band */
.sports-band { background: #f5f6f9; border-bottom: 1px solid var(--border); }
.sports-inner { display: flex; align-items: center; gap: 48px; padding-top: 31px; padding-bottom: 31px; }
.sports-heading { flex: none; line-height: 1.22; font-size: 10px; letter-spacing: .14em; font-weight: 800; color: #9a9eac; }
.sports-heading span, .sports-heading strong { display: block; }.sports-heading strong { color: #282c46; }
.sports-items { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 0; }
.sports-items span { white-space: nowrap; color: #50566f; font-size: 12px; font-weight: 700; }
.sports-items span:not(:last-child)::after { content: "/"; margin: 0 14px; color: #ccd0db; font-weight: 400; }

/* section typography */
.section-heading { max-width: 760px; }.section-heading-centered { margin-inline: auto; text-align: center; }
.section-kicker { display: flex; align-items: center; gap: 12px; font-size: 11px; line-height: 1.3; font-weight: 800; letter-spacing: .15em; color: #ef7549; margin: 0 0 18px; }
.section-heading-centered .section-kicker { justify-content: center; }
.kicker-rule { width: 21px; height: 2px; background: currentColor; }
h2 { color: var(--ink); font-size: clamp(34px, 3.65vw, 55px); font-weight: 800; letter-spacing: -.065em; line-height: 1.15; margin: 0 0 19px; }
h2 > span { color: #ed784f; }
.section-heading > p:last-child { color: var(--muted); font-size: 17px; max-width: 610px; line-height: 1.65; margin: 0 auto; }

/* Two paths */
.paths-section { background: #fff; }
.paths-grid { margin-top: 51px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px; }
.path-card { position: relative; overflow: hidden; isolation: isolate; min-height: 440px; border: 1px solid var(--border); border-radius: 25px; padding: 39px 43px 35px; display: flex; align-items: flex-start; flex-direction: column; }
.path-watermark { position: absolute; z-index: -1; top: -45px; right: 15px; font: 800 230px/1 var(--display); letter-spacing: -.1em; color: rgba(244,119,72,.06); pointer-events: none; }
.player-path { background: #fff9f5; border-color: #fae8de; }.club-path { background: #20243f; color: #fff; border-color: #20243f; }.club-path .path-watermark { color: rgba(255,255,255,.035); }
.path-card-top { display: flex; align-items: center; gap: 14px; }.path-icon { width: 52px; height: 52px; display: grid; place-items: center; color: var(--orange-dark); background: #ffe8dd; border-radius: 14px; }.path-icon svg { width: 27px; height: 27px; }.club-path .path-icon { color: var(--mint); background: #343e5c; }
.path-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: #a6401c; }.club-path .path-eyebrow { color: #87ddc9; }
.path-card h3 { margin: 31px 0 10px; font-size: clamp(27px, 3vw, 39px); line-height: 1.15; letter-spacing: -.06em; }.path-card > p { font-size: 15px; line-height: 1.6; color: #737082; max-width: 350px; margin-bottom: 22px; }.club-path > p { color: #b4b9ce; }
.check-list { margin: 0 0 27px; padding: 0; list-style: none; }.check-list li { position: relative; padding-left: 24px; font-size: 13px; font-weight: 600; margin-bottom: 9px; }.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--orange-dark); font-weight: 800; }.club-path .check-list li { color: #e3e5ef; }.club-path .check-list li::before { color: var(--mint); }
.path-cta { margin-top: auto; min-height: 45px; display: inline-flex; align-items: center; gap: 24px; border-radius: 9px; background: var(--orange-action); color: white; padding: 0 18px; text-decoration: none; font-size: 13px; font-weight: 800; transition: transform .2s, background .2s; }.path-cta:hover { background: #a93d1a; transform: translateY(-2px); }.path-cta span { font-size: 19px; font-weight: 400; }.club-path .path-cta { background: #fff; color: #242743; }.club-path .path-cta:hover { background: #e8ecf5; }

/* Detail sections */
.detail-section { overflow: hidden; }.players-detail { background: var(--paper); }.clubs-detail { background: white; }
.detail-layout { display: grid; grid-template-columns: minmax(0, .97fr) minmax(0, 1.03fr); align-items: center; gap: clamp(50px, 7vw, 105px); }
.detail-copy h2 { max-width: 580px; }.detail-copy h2 em { font-style: normal; color: var(--orange); }.detail-intro { max-width: 530px; color: var(--muted); font-size: 16px; line-height: 1.7; margin-bottom: 33px; }
.detail-list { border-top: 1px solid #dee1e8; }.detail-item { display: grid; grid-template-columns: 45px 1fr; gap: 12px; padding: 22px 0; border-bottom: 1px solid #dee1e8; }.detail-number { color: var(--orange); font: 800 12px var(--display); padding-top: 4px; }.detail-item h3 { color: #252940; font-size: 16px; letter-spacing: -.025em; margin: 0 0 5px; }.detail-item p { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0; }
.inline-cta { display: inline-flex; align-items: center; gap: 22px; margin-top: 28px; color: var(--orange-dark); font-size: 14px; font-weight: 800; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }.inline-cta span { font-size: 21px; line-height: 1; transition: transform .2s; }.inline-cta:hover span { transform: translate(3px,-3px); }
.feature-art { position: relative; min-width: 0; min-height: 550px; border-radius: 28px; overflow: hidden; isolation: isolate; }.art-grid { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px); background-size: 43px 43px; mask-image: linear-gradient(130deg, transparent 15%, #000 100%); }.art-label { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 800; letter-spacing: .12em; }.top-left { top: 28px; left: 30px; }.art-dot { display: block; width: 6px; height: 6px; background: var(--orange); border-radius: 50%; }
.player-art { color: white; background: radial-gradient(circle at 70% 65%, #3d4678 0%, #252b52 43%, #1a203e 100%); }.booking-display { position: absolute; width: 74%; max-width: 420px; left: 10%; top: 105px; padding: 25px; border-radius: 18px; background: white; color: #292e4b; box-shadow: 22px 30px 70px rgba(0,0,0,.34); transform: rotate(-4deg); }.booking-top { display: flex; align-items: center; justify-content: space-between; }.booking-top small, .club-board-head small { display: block; color: #a5aab6; font-size: 9px; font-weight: 800; letter-spacing: .13em; }.booking-top strong, .club-board-head strong { font-family: var(--display); display: block; font-size: 19px; letter-spacing: -.05em; line-height: 1.35; margin-top: 4px; }.booking-calendar { display: grid; place-items: center; height: 30px; width: 30px; color: var(--orange); background: #fff2eb; border-radius: 8px; font-size: 17px; }.booking-days { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; margin-top: 24px; }.booking-days span { padding: 11px 0; border: 1px solid #edf0f5; border-radius: 7px; color: #a5aab9; text-align: center; font-size: 8px; font-weight: 700; }.booking-days b { display: block; font-size: 17px; color: #4e5671; }.booking-days .day-selected { background: #f47748; color: #fff; border-color: #f47748; }.booking-days .day-selected b { color: #fff; }.booking-pills { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 22px; }.booking-pills span { border: 1px solid #e7e9ef; border-radius: 7px; text-align: center; font-size: 11px; font-weight: 700; padding: 11px 0; color: #6b7186; }.booking-pills .time-selected { background: #272c50; color: white; border-color: #272c50; }.booking-court { display: flex; align-items: center; gap: 11px; margin-top: 20px; padding: 14px 0; border-top: 1px solid #eceef3; }.court-icon { display: grid; place-items: center; background: #f2f4fa; width: 33px; height: 33px; flex: none; border-radius: 7px; font-size: 17px; color: #5a658b; }.booking-court strong { display: block; font-size: 11px; }.booking-court small { color: #a3a8b7; display: block; font-size: 9px; }.court-status { margin-left: auto; color: #289676; font-size: 8px; font-weight: 700; background: #e6f8f0; border-radius: 20px; padding: 4px 7px; }.booking-button { display: flex; justify-content: space-between; align-items: center; border-radius: 7px; margin-top: 8px; background: var(--orange); color: #fff; padding: 12px 16px; font-size: 11px; font-weight: 800; }.booking-button span { font-size: 17px; }.player-art-note { display: none; position: absolute; right: 8%; bottom: 51px; display: flex; flex-direction: column; gap: 8px; color: white; transform: rotate(6deg); }.note-icon { font-size: 40px; color: #77e0bf; }.player-art-note strong { font: 800 21px/1.25 var(--display); letter-spacing: -.05em; }
.club-art { color: white; background: radial-gradient(circle at 40% 40%, #ef9470, #e96d41 65%, #d65937); }.club-art .art-dot { background: white; }.club-board { position: absolute; top: 96px; right: 10%; width: 78%; max-width: 420px; background: #fff; border-radius: 17px; padding: 25px; transform: rotate(3deg); box-shadow: 18px 28px 60px rgba(105,43,23,.33); color: #262944; }.club-board-head { display: flex; align-items: flex-start; justify-content: space-between; }.board-menu { color: #8c91a6; font-size: 18px; line-height: 1; }.board-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 23px 0 24px; }.board-stats > div { padding: 13px 11px; background: #f5f6f9; border-radius: 8px; }.board-stats span { font-size: 8px; color: #8e95a5; display: block; }.board-stats strong { font: 800 19px var(--display); color: #303654; display: block; margin-top: 4px; }.board-section-title { display: flex; justify-content: space-between; align-items: center; font-size: 8px; font-weight: 800; letter-spacing: .09em; color: #8d93a4; margin-bottom: 11px; }.board-section-title span { font-size: 16px; color: var(--orange); }.board-activity { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #edeef2; }.activity-icon { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; flex: none; }.activity-orange { color: #d77654; background: #fff0e8; }.activity-teal { color: #3ba18e; background: #e4f6ee; }.activity-purple { color: #8273bd; background: #f1edff; }.board-activity strong { display: block; font-size: 10px; font-family: var(--body); }.board-activity small { display: block; font-size: 9px; color: #a0a4b4; }.activity-dot { width: 6px; height: 6px; background: #b7becc; border-radius: 50%; margin-left: auto; }.club-art-note { display: none; position: absolute; bottom: 29px; left: 28px; transform: rotate(-4deg); }.club-art-note span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; opacity: .8; }.club-art-note strong { font: 800 25px/1.2 var(--display); letter-spacing: -.05em; }

/* Process */
.how-section { background: #f7f8fb; }.steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; margin-top: 50px; }.step-card { background: white; border: 1px solid var(--border); border-radius: 18px; padding: 29px; min-height: 275px; }.step-index { display: flex; align-items: center; justify-content: space-between; color: #ec7951; font: 800 12px var(--display); }.step-index span { height: 1px; flex: 1; max-width: 70%; background: #e9ebf1; }.step-symbol { margin: 26px 0 11px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 13px; color: #f07448; background: #fff2eb; font-size: 27px; line-height: 1; }.step-card h3 { font-size: 21px; letter-spacing: -.04em; margin-bottom: 7px; }.step-card p { max-width: 240px; color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }

/* FAQ */
.faq-section { background: white; }.faq-layout { display: grid; grid-template-columns: .7fr 1fr; gap: 100px; align-items: start; }.faq-intro h2 { font-size: clamp(34px,3.3vw,49px); }.faq-intro h2 span { color: var(--orange); }.faq-intro > p:last-child { color: var(--muted); }.faq-list { border-top: 1px solid var(--border); }.faq-list details { border-bottom: 1px solid var(--border); }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; list-style: none; cursor: pointer; font-weight: 700; color: #2f334b; font-size: 15px; }.faq-list summary::-webkit-details-marker { display: none; }.faq-plus { width: 24px; height: 24px; flex: none; position: relative; border-radius: 50%; background: #f6f6fa; }.faq-plus::before, .faq-plus::after { content: ""; display: block; position: absolute; top: 11px; left: 7px; width: 10px; height: 2px; background: var(--orange); border-radius: 2px; transition: transform .2s; }.faq-plus::after { transform: rotate(90deg); }.faq-list details[open] .faq-plus::after { transform: rotate(0); }.faq-list details p { padding: 0 46px 19px 0; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }.faq-list details p a { color: var(--orange-dark); font-weight: 600; }

/* Closing section */
.closing-section { background: #bd4721; color: #fff; overflow: hidden; }.closing-content { min-height: 385px; padding-top: 65px; padding-bottom: 65px; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; }.closing-pattern { position: absolute; pointer-events: none; width: 500px; height: 500px; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; right: 8%; top: -100px; box-shadow: 0 0 0 60px rgba(255,255,255,.06), 0 0 0 130px rgba(255,255,255,.045), 0 0 0 210px rgba(255,255,255,.025); }.closing-copy, .closing-actions { position: relative; z-index: 1; }.closing-copy .section-kicker { color: #fff3eb; }.closing-copy h2 { color: #fff; font-size: clamp(42px,4.4vw,64px); line-height: 1.08; margin-bottom: 14px; }.closing-copy h2 em { font-style: normal; color: #242743; }.closing-copy > p:last-child { max-width: 450px; color: #fff2eb; margin-bottom: 0; }.closing-actions { display: flex; flex-direction: column; min-width: 235px; gap: 11px; }.closing-actions .button { justify-content: space-between; }.button-white { background: #fff; color: #262942; }.button-white:hover { background: #f3f4f9; }.button-dark-outline { border: 1px solid rgba(255,255,255,.73); color: white; }.button-dark-outline:hover { background: rgba(255,255,255,.1); }

/* Footer */
.site-footer { background: #171a32; color: #fff; }.footer-top { display: flex; justify-content: space-between; gap: 48px; padding-top: 65px; padding-bottom: 65px; }.footer-brand-group p { color: #999eb4; font-size: 14px; margin: 18px 0 0; }.footer-links { display: flex; gap: 100px; }.footer-links > div { display: flex; flex-direction: column; gap: 10px; }.footer-links strong { color: #fff; font-size: 12px; font-weight: 800; margin-bottom: 9px; }.footer-links a { color: #a1a7bb; font-size: 13px; text-decoration: none; }.footer-links a:hover { color: #fff; }.footer-bottom { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.13); padding-top: 20px; padding-bottom: 26px; color: #888ea8; font-size: 11px; }

/* Responsive adjustments */
@media (max-width: 1150px) {
  .container { width: min(100% - 64px, 1260px); }
  .hero-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px; }
  h1 { font-size: clamp(52px, 5.5vw, 72px); }
  .dashboard-preview { top: 90px; left: 0; width: 96%; }
  .phone-preview { right: -4%; }
  .scene-tag { left: -3%; }
  .detail-layout { gap: 44px; }
  .faq-layout { gap: 60px; }
  .sports-inner { gap: 26px; }
}
@media (max-width: 900px) {
  .container { width: min(100% - 48px, 760px); }
  .nav-inner { height: 82px; }.main-nav { gap: 20px; margin-left: 0; }
  .header-link { padding: 9px 12px; font-size: 12px; }
  .hero-layout { grid-template-columns: 1fr; padding-top: 160px; padding-bottom: 95px; }
  .hero-copy { text-align: center; padding-top: 0; }.hero-copy .eyebrow { justify-content: center; }.hero-copy h1 { max-width: 680px; margin-inline: auto; }.hero-description { margin-inline: auto; }.hero-actions { justify-content: center; }.hero-footnote { justify-content: center; }
  .hero-visual { width: min(100%, 610px); margin: 5px auto 0; }
  .dashboard-preview { width: 86%; left: 5%; }.phone-preview { right: 0; }.scene-tag { left: 0; }.visual-disclaimer { bottom: -32px; }
  .section-pad { padding: 85px 0; }
  .sports-inner { align-items: flex-start; }
  .paths-grid { gap: 16px; }.path-card { padding: 30px; min-height: 445px; }.path-card h3 { font-size: 29px; }
  .detail-layout { grid-template-columns: 1fr; }.reverse-layout .feature-art { order: 2; }.reverse-layout .detail-copy { order: 1; }
  .detail-copy { max-width: 660px; }.feature-art { min-height: 510px; width: min(100%,650px); margin-inline: auto; }.booking-display { max-width: 480px; }.club-board { max-width: 480px; }
  .faq-layout { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 620px) {
  .container { width: calc(100% - 36px); }
  .nav-inner { height: 75px; gap: 14px; }.brand { gap: 5px; font-size: 22px; }.brand-mark { width: 24px; }.brand-mark svg { width: 22px; height: 26px; }.main-nav { gap: 12px; }.main-nav a { font-size: 12px; }.header-link { display: none; }
  .hero-layout { padding-top: 133px; padding-bottom: 80px; }.hero { min-height: 0; }.eyebrow { font-size: 9px; letter-spacing: .12em; }h1 { font-size: clamp(48px, 10.6vw, 66px); margin-top: 23px; margin-bottom: 19px; letter-spacing: -.073em; }.hero-description { font-size: 15px; max-width: 420px; }.hero-actions { gap: 10px; }.button { min-height: 50px; font-size: 12px; padding: 0 17px; gap: 10px; }.hero-footnote { margin-top: 24px; font-size: 11px; }
  .hero-visual { min-height: 385px; margin-top: 25px; }.scene-halo { width: 280px; height: 280px; right: 10%; top: 16px; }.dashboard-preview { width: 91%; left: 0; top: 62px; transform: rotate(-4deg); }.preview-topbar { height: 35px; padding: 0 12px; }.preview-content { padding: 12px; }.preview-heading { margin-bottom: 8px; }.preview-heading strong { font-size: 16px; }.preview-summary { margin-bottom: 6px; }.schedule { grid-template-columns: 34px repeat(3, 1fr); grid-template-rows: 23px repeat(3, 41px); gap: 3px; }.schedule-cell { padding: 4px; }.schedule-cell:not(.hour):not(.heading) span { font-size: 7px; }.schedule-cell:not(.hour):not(.heading) small { font-size: 5px; }.schedule-cell.heading, .schedule-cell.hour { font-size: 7px; }.preview-legend { gap: 6px; padding-top: 9px; }.preview-legend span { font-size: 6px; }.preview-legend i { width: 5px; height: 5px; }.phone-preview { width: 147px; min-height: 284px; right: 0; bottom: 3px; padding: 5px; border-width: 4px; border-radius: 22px; }.phone-notch { top: 4px; width: 45px; height: 10px; }.phone-body { padding: 18px 6px 6px; }.phone-greeting { font-size: 6px; }.phone-avatar { width: 16px; height: 16px; }.phone-title { font-size: 17px; margin: 11px 0; }.match-card { padding: 8px; border-radius: 8px; }.match-sport,.match-live { font-size: 6px; }.match-time { font-size: 20px; margin-top: 8px; }.match-place { font-size: 7px; }.player-avatars { margin-top: 9px; }.player-avatars > span { width: 20px; height: 20px; font-size: 6px; }.match-caption { font-size: 6px; }.phone-bottom { font-size: 12px; margin-top: 10px; }.scene-tag { padding: 8px 10px; bottom: 7px; left: 0; }.scene-tag-icon { width: 21px; height: 21px; font-size: 11px; }.scene-tag strong { font-size: 8px; }.scene-tag small { font-size: 7px; }.visual-disclaimer { right: 0; bottom: -23px; font-size: 8px; }
  .sports-inner { padding-block: 24px; flex-direction: column; gap: 15px; }.sports-heading span, .sports-heading strong { display: inline; }.sports-heading strong { margin-left: 4px; }.sports-items span { font-size: 11px; }.sports-items span:not(:last-child)::after { margin-inline: 8px; }
  .section-pad { padding: 70px 0; }.section-kicker { font-size: 10px; }.section-heading > p:last-child { font-size: 15px; }h2 { font-size: clamp(34px, 8vw, 44px); }.paths-grid { grid-template-columns: 1fr; margin-top: 30px; }.path-card { min-height: 420px; }.path-card h3 { margin-top: 25px; }.path-watermark { font-size: 170px; top: -20px; }.detail-intro { font-size: 15px; margin-bottom: 25px; }.detail-item { padding-block: 18px; }.feature-art { min-height: 425px; border-radius: 19px; }.art-label { top: 20px; left: 20px; font-size: 8px; }.booking-display { top: 78px; left: 7%; width: 83%; padding: 17px; }.booking-days { margin-top: 18px; gap: 4px; }.booking-days span { padding: 7px 0; font-size: 7px; }.booking-days b { font-size: 13px; }.booking-pills { margin-top: 16px; gap: 5px; }.booking-pills span { font-size: 9px; padding: 9px 0; }.booking-court { margin-top: 12px; }.booking-button { padding: 9px 11px; }.player-art-note { bottom: 14px; right: 6%; }.player-art-note strong { font-size: 15px; }.note-icon { font-size: 20px; }.club-board { top: 75px; width: 83%; right: 7%; padding: 17px; }.board-stats { margin-block: 16px; }.club-art-note { left: 20px; bottom: 12px; }.club-art-note strong { font-size: 18px; }.club-art { min-height: 500px; }
  .steps-grid { grid-template-columns: 1fr; gap: 11px; margin-top: 32px; }.step-card { min-height: 0; padding: 23px; }.step-symbol { margin: 14px 0; }.step-card p { max-width: none; }.faq-list summary { font-size: 14px; }.closing-content { min-height: 0; display: block; padding-block: 64px; }.closing-copy h2 { font-size: 44px; }.closing-actions { margin-top: 28px; }.footer-top { flex-direction: column; gap: 35px; padding-block: 45px; }.footer-links { gap: 50px; }.footer-bottom { gap: 12px; flex-wrap: wrap; }
}
@media (max-width: 370px) {
  .brand { font-size: 19px; }.main-nav { gap: 9px; }.main-nav a { font-size: 11px; }.hero-actions .button { width: 100%; }.hero-footnote { text-align: left; }
  .dashboard-preview { width: 95%; }.phone-preview { width: 133px; }.scene-tag { left: -4px; }
  .court-status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .sports-items[aria-hidden="true"] { display: none; }
  .sports-marquee { overflow: visible; mask-image: none; }
  .sports-items { flex-wrap: wrap; }
}


/* EVOPLAY v2 – actual-interface media, store availability, pricing and club onboarding */
.main-nav { margin-left: 0; gap: clamp(14px,2.5vw,34px); }
.hero-product-visual { perspective: none; min-height: 510px; display: flex; align-items: center; justify-content: center; }
.hero-screen-glow { position: absolute; width: 92%; height: 75%; border-radius: 50%; background: rgba(244,119,72,.18); filter: blur(75px); transform: rotate(-22deg); }
.real-screen { background: #f6f8fc; color: #32364c; border: 1px solid rgba(255,255,255,.65); box-shadow: 0 35px 95px rgba(0,0,0,.38); overflow: hidden; }
.hero-real-screen { position: relative; width: 100%; max-width: 100%; border-radius: 15px; transform-origin: right center; transform: perspective(1200px) rotateY(-5deg) rotateZ(.4deg); }
.screen-chrome { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 14px; font: 700 10px var(--body); color: #868a9e; background: #fff; border-bottom: 1px solid #e9eaf0; }
.screen-chrome > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chrome-dots { display: flex; gap: 5px; flex: none; }.chrome-dots i { background: #e6e8ef; width: 7px; height: 7px; border-radius: 50%; }.chrome-dots i:first-child { background: #ffac95; }.chrome-dots i:nth-child(2) { background: #f5d18f; }.chrome-dots i:nth-child(3) { background: #83c9b4; }
.chrome-live { font-size: 8px; letter-spacing: .13em; color: #9c9eac; white-space: nowrap; }
.real-screen img { width: 100%; height: auto; display: block; }
.hero-floating-tile { position: absolute; display: flex; align-items: center; gap: 12px; z-index: 3; padding: 13px 20px; background: #fff; color: #252842; border-radius: 13px; box-shadow: 0 25px 70px rgba(0,0,0,.25); bottom: 30px; left: 0; transform: rotate(-3deg); }.tile-check { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; color: #176b57; background: #def8ee; font-weight: 800; }.hero-floating-tile strong, .hero-floating-tile small { display: block; }.hero-floating-tile strong { font-size: 12px; }.hero-floating-tile small { font-size: 10px; color: #8a8fa0; }
.screen-footnote { position: absolute; margin: 0; bottom: 0; right: 0; color: #a5a7b8; font-size: 10px; }

/* Player screenshot: no invented app UI; shows an explicit fallback until a genuine capture is supplied */
.photo-stage { min-height: 560px; display: flex; justify-content: center; align-items: center; padding: 45px 20px; }
.preview-iphone { position: relative; z-index: 2; width: min(55%,260px); aspect-ratio: 9/19.5; max-height: 465px; border-radius: 38px; padding: 10px; border: 5px solid #070914; background: #090b18; transform: rotate(-6deg); box-shadow: 20px 35px 70px rgba(0,0,0,.42),0 0 0 1px #5f6681; }
.preview-notch { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); top: 16px; width: 26%; height: 12px; border-radius: 30px; background: #090b18; }
.screenshot-holder { background: #f4f4f8; height: 100%; overflow: hidden; border-radius: 27px; color: #2c304d; position: relative; }.screenshot-holder img { display: none; width: 100%; height: 100%; object-fit: cover; object-position: top; }.screenshot-holder.has-image img { display: block; }.screenshot-holder.has-image .screenshot-empty { display:none; }
.screenshot-empty { height: 100%; padding: 27px 20px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; text-align: left; background: radial-gradient(circle at 60% 10%, #ffffff 0%, #edf0f8 45%, #e5e8f4 100%); }.screenshot-empty .empty-camera { font-size: 35px; line-height: 1; color: #f47748; }.screenshot-empty strong { font: 800 22px/1.16 var(--display); letter-spacing: -.06em; }.screenshot-empty span:not(.empty-camera) { font-size: 12px; color: #687089; line-height: 1.5; }.screenshot-empty small { color: #b8532a; padding: 6px 10px; border-radius: 50px; background: #fff1ea; font-size: 9px; font-weight: 700; }
.player-visual-caption { position: absolute; z-index: 1; bottom: 75px; right: 5%; width: 150px; display:flex; flex-direction:column; gap: 8px; color: white; }.small-sparkle { color: #7bdfbb; font-size: 32px; }.player-visual-caption strong { font: 800 21px/1.12 var(--display); letter-spacing: -.05em; }.player-visual-caption > span:last-child { font-size: 11px; color: #bec5e1; }
.feature-art.player-art { min-height: 0; }
.player-art.photo-stage { min-height: 0; padding: 42px 18px 28px; }
.player-pair { position: relative; width: min(100%, 520px); height: 470px; }
.player-shot { position: absolute; width: 46%; height: auto; border-radius: 28px; border: 6px solid #070914; background: #070914; box-shadow: 18px 30px 55px rgba(0,0,0,.42); }
.player-shot-home { left: 0; top: 34px; transform: rotate(-7deg); }
.player-shot-book { right: 0; top: 0; transform: rotate(6deg); z-index: 2; }

/* Real rendered club interface */
.capture-stage { padding: 36px 0; min-height: 550px; background: linear-gradient(145deg,#f9a176,#e36a3f 75%); display: flex; flex-direction:column; align-items:center; justify-content:center; gap: 15px; }
.capture-intro { width: 85%; color: white; display: flex; flex-direction: column; }.capture-intro span { font-size: 10px; letter-spacing:.13em; font-weight:800; opacity:.9; }.capture-intro strong { margin-top: 7px; max-width: 370px; font: 800 23px/1.15 var(--display); letter-spacing: -.035em; }
.club-feature-frame { width: 85%; background: white; box-shadow: 0 24px 58px rgba(101,37,24,.29); border-radius: 12px; overflow: hidden; border: 1px solid #fff6; }.club-feature-frame img { width: 100%; height: auto; display:block; }.club-feature-frame .screen-chrome { padding:8px 10px; }.capture-see { text-decoration: none; background: rgba(255,255,255,.96); color: #2b2d4a; border-radius: 50px; padding: 10px 17px; font-size: 12px; font-weight: 800; }.capture-see:hover { background:#fff; text-decoration:underline; }.capture-disclaimer { font-size: 10px; color: rgba(255,255,255,.88); margin: 0; }

/* iOS / Android section */
.download-section { background: #fff; overflow:hidden; }.download-layout { display:grid; grid-template-columns: 1fr .93fr; align-items:center; gap: min(9vw,120px); }.download-intro h2 { max-width: 650px; }.download-intro h2 em { color: var(--orange-action); font-style:normal; }.download-intro > p:not(.section-kicker):not(.availability-note) { max-width: 510px; color: var(--muted); line-height:1.75; }
.store-badges { display:flex; flex-wrap:wrap; gap:12px; margin-top: 30px; }.store-badge { display:flex; align-items:center; gap:13px; min-height:67px; min-width:185px; padding: 9px 17px; border:1px solid #12152a; border-radius:12px; background: #151a2c; color:#fff; text-decoration:none; transition:transform .2s,background .2s; }.store-badge:hover:not(.is-coming) { transform:translateY(-3px);background:#2c3453; }.store-badge svg { width: 31px;height:31px;flex:none; }.store-badge span { display:flex;flex-direction:column;line-height:1.2; }.store-badge small { font-size:9px; font-weight:700;letter-spacing:.04em;opacity:.76; }.store-badge strong { font:700 21px/1.3 var(--body);letter-spacing:-.05em; }.store-badge.is-coming { opacity:.68;cursor:not-allowed; }.availability-note {font-size: 12px; color:var(--muted); max-width:520px;margin:16px 0 0;}.availability-note a {color:var(--orange-dark);font-weight:700;}
.download-visual { position:relative; min-height:370px; background: radial-gradient(circle at 50% 53%,#3c446a,#202544 55%,#171b34);border-radius:27px;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#fff;overflow:hidden;box-shadow:0 15px 55px rgba(30,34,61,.12); }.download-orbit { width:310px;height:310px;border-radius:100%;position:absolute;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 0 45px rgba(255,255,255,.025),0 0 0 100px rgba(255,255,255,.02); }.download-mark { z-index:1; font:800 clamp(38px,6vw,76px) var(--display);letter-spacing:-.09em; }.download-mark span { color: #fff; }.download-mark b { color:var(--orange); }.download-visual-caption { position:relative; z-index:1; font-size:10px; letter-spacing:.2em; font-weight:800; color:#d7d9e7; }.download-mini-pill { position:relative;z-index:1;margin-top:44px;padding:10px 15px;border:1px solid rgba(255,255,255,.15);border-radius:25px;background:rgba(255,255,255,.08);font-size:12px;color:#dadceb; }

/* Pricing */
.pricing-section { background:#f6f7fb; }.pricing-layout { display:grid;grid-template-columns:.95fr 1.05fr;gap: clamp(45px,8vw,115px);align-items:center; }.pricing-intro h2 em { color:var(--orange-action);font-style:normal; }.pricing-intro > p:not(.section-kicker) { max-width:510px;color:var(--muted);line-height:1.75; }.pricing-points {margin-top:34px;display:flex;flex-direction:column;gap:17px;}.pricing-points > div {display:flex;align-items:center;gap:17px;}.pricing-points > div span {width:32px;height:32px;flex:none;display:grid;place-items:center;background:#fff;border:1px solid #e7e8ee;color:var(--orange-dark);font-size:12px;font-weight:800;border-radius:8px;}.pricing-points p { margin:0;color:#5f657c;font-size:14px; }
.pricing-card { padding: 37px; border-radius: 27px;background:#fff;border:1px solid #e9eaf0;box-shadow:0 28px 75px rgba(26,30,53,.07); }.pricing-card-head {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}.pricing-label{color:#878b9c;font-weight:800;letter-spacing:.1em;font-size:10px;}.pricing-popular {font-size:11px;font-weight:800;color:#ae4a2a;background:#fff0e9;padding:8px 12px;border-radius:100px; }.pricing-amount {display:flex;align-items:baseline;gap:11px;margin:25px 0 4px;}.pricing-amount strong {font:800 clamp(56px,6vw,81px)/1 var(--display);letter-spacing:-.085em;color:#242743;}.pricing-amount span{font-weight:600;color:#73788a;font-size:14px;}.pricing-cap {font-size:14px;color:var(--muted);}.pricing-cap strong {color:#353956;}
.pricing-calculator {margin-top:28px;border:1px solid #e9ebf1;border-radius:16px;padding:22px 22px 16px;background:#fafbfe;}.calculator-title {display:flex;align-items:center;justify-content:space-between;gap:18px;}.calculator-title label {font-size:13px;font-weight:700;color:#353954;}.counter-controls{display:flex;align-items:center;gap:12px;}.counter-button{border:1px solid #e2e5ec;background:#fff;color:#252a49;border-radius:8px;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;font-weight:800;}.counter-button:hover {background:#ffe9df;border-color:#fac7b4;}.counter-controls output {font:800 16px var(--body);min-width:18px;text-align:center;}#court-count {display:block;width:100%;height:6px;margin:25px 0 8px;accent-color:var(--orange-action);cursor:pointer;}.range-labels{display:flex;justify-content:space-between;color:#989cab;font-size:11px;}.pricing-total{margin-top:22px;padding-top:21px;border-top:1px solid #e6e8ee;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;}.pricing-total > div:first-child span,.pricing-total small {display:block;}.pricing-total > div:first-child span {color:#454962;font-weight:800;font-size:14px;}.pricing-total small {color:#969aaa;font-size:11px;margin-top:3px;}.pricing-total > div:last-child{display:flex;gap:5px;align-items:baseline;white-space:nowrap;}.pricing-total strong{font:800 35px/1 var(--display);letter-spacing:-.07em;}.pricing-total > div:last-child span{color:#858a9d;font-size:12px;}.pricing-savings {font-size:11px;color:#7c8295;margin:15px 0 0;}.pricing-main-cta {width:100%;margin-top:22px;justify-content:center;}.pricing-legal {font-size:10px;color:#979cac;text-align:center;margin:14px 0 0;}

/* Club signup */
.signup-section { background:#fff; }.signup-layout {display:grid;grid-template-columns:.77fr 1.23fr;gap: clamp(45px,7vw,110px);align-items:start;}.signup-aside {position:sticky;top:30px;padding-top:23px;}.signup-aside h2 em{color:var(--orange-action);font-style:normal;}.signup-aside>p:not(.section-kicker){color:var(--muted);line-height:1.75;max-width:420px;}.signup-benefits{display:flex;flex-direction:column;gap:19px;margin-top:35px;}.signup-benefits > div {display:flex;align-items:center;gap:11px;color:#4c526d;font-size:14px;font-weight:600;}.benefit-icon{width:26px;height:26px;flex:none;background:#e4f7ee;color:#25836f;display:grid;place-items:center;border-radius:100%;font-size:13px;font-weight:800;}.signup-side-link{margin-top:45px;padding-top:22px;border-top:1px solid #eceef2;color:#74798f;font-size:13px;}.signup-side-link a{color:var(--orange-dark);font-weight:800;text-decoration:none;}.signup-side-link a:hover{text-decoration:underline;}
.signup-panel{border:1px solid #e9eaf0;border-radius:25px;padding:38px;background:#fff;box-shadow:0 23px 75px rgba(29,33,61,.075);min-width:0;}.signup-panel-head{display:flex;justify-content:space-between;gap:20px;align-items:center;}.signup-eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--orange-dark);}.signup-panel-head h3{margin:5px 0 0;font-size:26px;letter-spacing:-.06em;}.setup-badge{font-size:10px;font-weight:800;color:#9b6429;background:#fff4de;border:1px solid #f8dba5;border-radius:99px;padding:7px 10px;white-space:nowrap;}.setup-badge.is-live{background:#e9f8f2;border-color:#bae8d5;color:#24745e;}
.signup-progress{display:flex;align-items:center;gap:7px;border-bottom:1px solid #eceef2;padding:27px 0; margin-bottom:25px;}.progress-step{display:flex;align-items:center;gap:7px;color:#aaaebc;white-space:nowrap;font-size:11px;font-weight:700;}.progress-step b{display:grid;place-items:center;width:25px;height:25px;border-radius:100%;border:1px solid #e4e6ec;color:#a2a8b7;font-size:11px;}.progress-step.current,.progress-step.complete{color:#333850;}.progress-step.current b{background:#ed7043;color:#fff;border-color:#ed7043;}.progress-step.complete b{background:#e8f7ef;border-color:#e8f7ef;color:#29826b;}.progress-line{background:#eceef3;height:1px;flex:1;min-width:9px;}
.form-step {border:0;margin:0;padding:0;min-width:0;}.form-step[hidden],.form-nav button[hidden],.form-message[hidden]{display:none!important;}.form-step legend{font:800 21px/1.35 var(--display);letter-spacing:-.04em;color:#272b46;}.step-intro{color:#8a90a2;font-size:13px;margin:7px 0 22px;}.field{display:flex;flex-direction:column;gap:7px;margin:0 0 18px;min-width:0;}.field label,.field-legend{font-size:12px;font-weight:800;color:#40455f;}.field label span,.field-legend span{color:var(--orange-dark);}.field input:not([type="checkbox"]),.field select{width:100%;height:47px;min-width:0;padding:0 13px;border:1px solid #e0e3ea;border-radius:9px;background:#fcfcfe;color:#272a43;outline:none;font:500 13px var(--body);}.field input:focus,.field select:focus{border-color:var(--orange);box-shadow:0 0 0 3px #f4774827;}.field input::placeholder{color:#b0b4c0;}.field input:user-invalid{border-color:#d65c53;}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}.form-court-row{display:flex;align-items:center;gap:16px;}.form-court-row input{max-width:140px;}.form-court-row span{color:#7d8296;font-size:12px;}.form-court-row strong{color:var(--orange-dark);font-weight:800;}.sport-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}.sport-options label{cursor:pointer;display:block;}.sport-options label input{position:absolute;opacity:0;pointer-events:none;}.sport-options label span{display:block;border-radius:9px;padding:9px 12px;border:1px solid #e8eaf0;background:#fcfcfd;color:#5d6279;font-size:12px;font-weight:600;}.sport-options label input:checked+span{color:#9f441f;border-color:#efad93;background:#fff0e9;}.sport-options label input:focus-visible+span{outline:3px solid #f7b595;outline-offset:3px;}.terms-row{display:flex;align-items:flex-start;gap:10px;margin:3px 0 17px;cursor:pointer;font-size:12px;color:#646b7d;}.terms-row input{margin-top:3px;accent-color:var(--orange-action);}.form-security-note{font-size:11px;color:#9aa0af;line-height:1.5;margin:0;}.form-message{background:#fff4eb;border:1px solid #f5cead;border-radius:9px;padding:12px;font-size:12px;color:#925322;margin-top:10px;}.form-message.is-error{background:#fff0f0;border-color:#eebaba;color:#9b3535;}.form-message.is-success{background:#ebfaf2;border-color:#ace5c5;color:#286d51;}.form-nav{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:22px;}.form-back{cursor:pointer;color:#6b7185;font-size:13px;font-weight:700;border:0;background:transparent;padding:10px 2px;}.form-back:hover{text-decoration:underline;}.form-next,.form-submit{margin-left:auto;border:0;cursor:pointer;}.form-next:disabled,.form-submit:disabled{opacity:.5;cursor:wait;}.signup-note{margin:20px 0 0;border-top:1px solid #eceef2;padding-top:17px;color:#9298aa;font-size:11px;line-height:1.55;}

@media(max-width:1150px){.hero-real-screen{width:97%;}.hero-product-visual{min-height:420px;}.pricing-layout,.signup-layout{gap:45px;}.signup-panel{padding:25px;}.main-nav{gap:18px;}.nav-inner{gap:16px;}}
@media(max-width:900px){.hero-product-visual{min-height:520px;width:min(100%,650px);}.hero-real-screen{width:94%;}.hero-floating-tile{left:2%;bottom:30px;}.screen-footnote{right:2%;}.pricing-layout,.signup-layout,.download-layout{grid-template-columns:1fr;gap:40px;}.pricing-intro>p:not(.section-kicker){max-width:700px;}.signup-aside{position:static;padding-top:0;}.signup-panel{padding:36px;}.download-visual{min-height:280px;}.capture-stage{min-height:525px;}}
@media(max-width:620px){.main-nav{gap:12px;}.main-nav a{font-size:11px;}.hero-product-visual{min-height:335px;margin-top:35px;}.hero-real-screen{width:98%;border-radius:10px;transform:rotate(1deg);}.hero-real-screen .screen-chrome{padding:7px 9px;}.hero-real-screen .chrome-live{display:none;}.hero-floating-tile{bottom:22px;left:0;padding:9px 12px;gap:8px;}.tile-check{width:24px;height:24px;font-size:10px;}.hero-floating-tile strong{font-size:10px;}.hero-floating-tile small{font-size:8px;}.screen-footnote{bottom:0;font-size:8px;}.photo-stage{min-height:460px;}.player-art.photo-stage{min-height:0;padding:24px 8px 16px;}.player-pair{height:360px;}.player-shot{width:47%;border-width:4px;border-radius:20px;}.player-shot-home{top:18px;}.preview-iphone{width:61%;max-height:410px;}.player-visual-caption{right:4%;width:110px;bottom:30px;}.player-visual-caption strong{font-size:15px;}.screenshot-empty{padding:20px 13px;gap:10px;}.screenshot-empty strong{font-size:17px;}.screenshot-empty span:not(.empty-camera){font-size:10px;}.screenshot-empty small{font-size:8px;}.capture-stage{min-height:380px;padding:30px 0;gap:13px;}.club-feature-frame{width:90%;}.capture-intro{width:90%;}.capture-intro strong{font-size:19px;}.capture-disclaimer{font-size:8px;text-align:center;}.store-badges{flex-direction:column;align-items:stretch;}.store-badge{width:100%;}.download-visual{min-height:250px;}.download-mini-pill{font-size:10px;margin-top:28px;}.pricing-card{padding:22px;}.pricing-amount strong{font-size:64px;}.pricing-amount span{font-size:12px;}.pricing-calculator{padding:17px;}.pricing-total strong{font-size:29px;}.signup-panel{padding:21px 17px;border-radius:18px;}.signup-panel-head{align-items:flex-start;}.signup-panel-head h3{font-size:21px;}.setup-badge{font-size:9px;padding:6px 8px;}.signup-progress{gap:5px;padding-block:20px;}.progress-step{font-size:9px;gap:5px;}.progress-step b{width:21px;height:21px;font-size:9px;}.progress-line{min-width:4px;}.field-grid{grid-template-columns:1fr;gap:0;}.sport-options{grid-template-columns:repeat(2,minmax(0,1fr));}.form-step legend{font-size:18px;}.signup-aside h2{font-size:38px;}}
@media(max-width:370px){.form-court-row{flex-direction:column;align-items:flex-start;gap:8px;}.pricing-amount{gap:7px;}.signup-panel{padding:18px 13px;}}

.brand img { height: 42px; }
.download-logo { position: relative; z-index: 1; width: min(78%, 280px); height: auto; }
.terms-row a { color: var(--orange-dark); font-weight: 800; }
.pricing-total strong.is-bump { animation: price-bump .35s ease; }
@keyframes price-bump { 50% { transform: scale(1.06); } }
.hero-copy .eyebrow, .hero-copy h1, .hero-copy .hero-description, .hero-copy .hero-actions, .hero-copy .hero-footnote { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy h1 { animation-delay: .08s; }
.hero-copy .hero-description { animation-delay: .16s; }
.hero-copy .hero-actions { animation-delay: .24s; }
.hero-copy .hero-footnote { animation-delay: .32s; }
.hero-real-screen { animation: screen-in 1s cubic-bezier(.2,.7,.2,1) .15s both; }
.hero-floating-tile { animation: tile-float 5.5s ease-in-out 1s infinite; }
.hero-glow-one { animation: glow-drift 16s ease-in-out infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes screen-in { from { opacity: 0; transform: perspective(1200px) rotateY(-5deg) rotateZ(.4deg) translateY(24px); } to { opacity: 1; transform: perspective(1200px) rotateY(-5deg) rotateZ(.4deg); } }
@media (min-width: 901px) {
  .hero-layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; }
}
.hero-copy, .hero-visual { min-width: 0; }
.hero-copy { container-type: inline-size; }
.hero-copy h1 { max-width: 100%; font-size: clamp(28px, 8.1cqi, 64px); overflow-wrap: normal; }
.hero-product-visual { overflow: hidden; }
.hero-real-screen { width: 100%; max-width: 100%; transform-origin: right center; }
@keyframes tile-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(-5deg); } }
@keyframes glow-drift { 50% { transform: translate3d(-24px, 18px, 0); } }
.sports-inner { align-items: center; }
.sports-marquee { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sports-track { display: flex; width: max-content; animation: ticker 32s linear infinite; }
.sports-marquee:hover .sports-track { animation-play-state: paused; }
.sports-track .sports-items { flex-wrap: nowrap; padding-right: 8px; }
.sports-soon { color: var(--orange-dark) !important; }
@keyframes ticker { to { transform: translateX(-50%); } }
@supports (animation-timeline: view()) {
  .path-card, .step-card, .pricing-card, .signup-panel, .detail-copy, .capture-stage { animation: rise both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
}
.legal-page { background: var(--paper); }
.legal-main { padding: 140px 0 80px; }
.legal-card { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: clamp(24px, 4vw, 56px); box-shadow: var(--shadow); }
.legal-card h1 { font-family: var(--display); letter-spacing: -.05em; font-size: clamp(36px, 5vw, 56px); margin: 8px 0 12px; }
.legal-card h2 { font-size: 20px; margin: 32px 0 8px; letter-spacing: -.03em; }
.legal-card p, .legal-card li { color: #4c5168; }
.legal-card a { color: var(--orange-dark); font-weight: 700; }
.legal-meta { color: #8a90a3; font-size: 13px; }
@media (max-width: 620px) {
  .brand img { height: 32px; }
  .hero-real-screen { animation-name: rise; }
}

.result-link{font-weight:800;text-decoration:underline;color:inherit;}
/* Polished native range control */
#court-count { -webkit-appearance:none;appearance:none;background:#dce1ea;border:0;outline:none;border-radius:99px; }
#court-count::-webkit-slider-runnable-track {height:6px;border-radius:99px;background:#dce1ea;}
#court-count::-moz-range-track {height:6px;border-radius:99px;background:#dce1ea;}
#court-count::-webkit-slider-thumb { -webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7px;border:3px solid #fff;background:#c54a21;border-radius:50%;box-shadow:0 2px 10px rgba(195,79,31,.3);cursor:pointer; }
#court-count::-moz-range-thumb {width:14px;height:14px;border:3px solid #fff;background:#c54a21;border-radius:50%;box-shadow:0 2px 10px rgba(195,79,31,.3);cursor:pointer;}
#court-count:focus-visible {outline:3px solid #f4ac91;outline-offset:7px;}
@media (max-width:620px) {
 .main-nav a:nth-child(4) {display:none;}
}
@media (max-width: 900px) {
  .hero-layout { grid-template-columns: 1fr; gap: 28px; }
  .hero-copy { text-align: center; }
  .hero-copy .eyebrow, .hero-actions, .hero-footnote { justify-content: center; }
  .hero-copy h1, .hero-description { margin-inline: auto; }
  .hero-visual { width: min(100%, 520px); margin-inline: auto; }
  .hero-real-screen { transform: none; width: 100%; }
  .hero-product-visual { min-height: 0; }
}
@media (max-width: 620px) {
  html, body { overflow-x: clip; }
  .site-header { left: 0; right: 0; width: auto; }
  .nav-inner { width: calc(100% - 32px); max-width: 100%; }
  .brand { flex: none; }
  .brand img { height: 28px; }
  .main-nav { min-width: 0; margin-left: 0; gap: 10px; }
  .hero-copy h1 { font-size: clamp(22px, 7.4cqi, 40px); letter-spacing: -.08em; }
  .hero-description { font-size: 15px; }
  .hero-actions { width: 100%; }
  .hero-actions .button { width: 100%; }
  .hero-product-visual { display: flex; flex-direction: column; align-items: stretch; overflow: visible; margin-top: 8px; }
  .hero-real-screen { animation: none; border-radius: 12px; }
  .hero-floating-tile, .screen-footnote { position: static; transform: none; animation: none; }
  .hero-floating-tile { margin-top: 14px; align-self: center; }
  .screen-footnote { margin-top: 10px; text-align: center; }
  .sports-band, .sports-inner { max-width: 100%; overflow: hidden; }
  .sports-marquee { width: 100%; max-width: 100%; min-width: 0; flex: none; }
  .signup-progress { overflow-x: auto; }
}