:root {
  --mcs-ink: #102018;
  --mcs-muted: #5d6f67;
  --mcs-bg: #f4f8f1;
  --mcs-surface: #ffffff;
  --mcs-surface-soft: #f8fbf4;
  --mcs-line: #dfe8dc;
  --mcs-green: #168a43;
  --mcs-lime: #d8ef26;
  --mcs-clay: #c76b32;
  --mcs-sky: #d9eef3;
  --mcs-night: #122218;
  --mcs-danger: #b4233a;
  --mcs-radius: 18px;
  --mcs-shadow: 0 18px 42px rgba(20, 36, 28, .10);
  --mcs-shadow-soft: 0 10px 26px rgba(20, 36, 28, .08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html,
body {
  overflow-x: hidden;
  min-height: 100%;
}

body {
  margin: 0 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  color: var(--mcs-ink) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.26) 49%, rgba(22,138,67,.10) 50%, rgba(255,255,255,.26) 51%) center top / 132px 132px,
    radial-gradient(circle at 84% 8%, rgba(216,239,38,.30), transparent 28%),
    linear-gradient(180deg, #f5fbef 0%, #f9fbf6 44%, #ffffff 100%) !important;
  min-height: 100vh;
}

a { color: inherit; }

.page {
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 16px 0 !important;
  overflow-x: visible !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.site-header,
.topbar {
  margin: 0 0 18px !important;
  padding: 12px !important;
  border: 1px solid rgba(18,34,24,.08) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: var(--mcs-shadow-soft) !important;
  backdrop-filter: blur(14px);
}

.site-header {
  width: calc(100vw + 16px) !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

.site-header .header-logo-row,
.topbar {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 14px !important;
}

.brand,
.site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  color: var(--mcs-ink) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.brand-logo,
.site-header .brand-logo {
  height: 46px !important;
  max-width: 220px !important;
  object-fit: contain !important;
}

.brand-text,
.site-header .brand-text {
  color: var(--mcs-ink) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.site-header .header-menu {
  display: flex !important;
  grid-column: 2 !important;
  margin: 0 !important;
  justify-content: flex-end !important;
}

.top-actions,
.main-nav,
.site-header .top-actions,
.site-header .main-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.pill,
.site-header .pill,
.lang-switch a,
.lang-switch select {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--mcs-line) !important;
  background: #fff !important;
  color: #31433b !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}

.pill.nav-active,
.nav-active,
.lang-switch .active {
  background: var(--mcs-night) !important;
  border-color: var(--mcs-night) !important;
  color: #fff !important;
}

.donation-pill,
.improvement-pill {
  background: #f5ffd7 !important;
  border-color: #dbe88f !important;
  color: #405000 !important;
}

.menu-toggle,
.site-header .menu-toggle {
  display: none !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid var(--mcs-line) !important;
  background: #fff !important;
  color: var(--mcs-ink) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.hero,
.home-hero-clean,
.club-compact-top,
.create-callout {
  border: 1px solid rgba(18,34,24,.10) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 85% 12%, rgba(216,239,38,.34), transparent 24%),
    linear-gradient(135deg, rgba(22,138,67,.16), rgba(199,107,50,.08)),
    var(--mcs-surface) !important;
  box-shadow: var(--mcs-shadow) !important;
}

.home-hero-clean {
  color: var(--mcs-ink) !important;
  overflow: hidden !important;
}

.hero h1,
.home-hero-clean h1,
.club-compact-main h1 {
  color: var(--mcs-ink) !important;
  letter-spacing: 0 !important;
  line-height: 1.03 !important;
}

.hero p,
.home-hero-clean p,
.club-compact-top p,
.create-callout p {
  color: var(--mcs-muted) !important;
}

.home-score-preview,
.score-shell {
  background:
    radial-gradient(circle at 90% 0%, rgba(216,239,38,.18), transparent 28%),
    linear-gradient(145deg, #122218, #1b3525) !important;
  color: #f6fff4 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 70px rgba(18,34,24,.24) !important;
}

.preview-grid > *,
.score-table td,
.score-table th,
.score-header,
.score-status,
.viewer-footer {
  border-color: rgba(255,255,255,.12) !important;
}

.preview-grid > * {
  background: rgba(8,20,13,.72) !important;
}

.card,
.choice-card,
.home-compact-section,
.video-section,
.live-score-section,
.club-score-card {
  border: 1px solid rgba(18,34,24,.10) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: var(--mcs-shadow-soft) !important;
  color: var(--mcs-ink) !important;
}

.card-pad { padding: 20px !important; }

.section-title {
  color: #51645b !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
}

.small,
.history-meta,
.club-score-meta,
.court,
.rule-line,
.updated,
.event time {
  color: var(--mcs-muted) !important;
}

.field label {
  color: #31433b !important;
  font-weight: 850 !important;
}

.field input,
.field select,
.field textarea,
.copy-row input,
.public-photo-password-form input,
.mcs-photo-access-row select,
.mcs-photo-access-row input[type=password] {
  border: 1px solid var(--mcs-line) !important;
  border-radius: 14px !important;
  background: #fbfdf8 !important;
  color: var(--mcs-ink) !important;
  padding: 13px 14px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset !important;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.copy-row input:focus {
  border-color: var(--mcs-green) !important;
  box-shadow: 0 0 0 4px rgba(22,138,67,.13) !important;
  outline: none !important;
}

.btn,
.history-actions a,
.history-actions button,
.club-score-actions a,
.copy-row button {
  min-height: 44px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.btn-primary,
.point-btn {
  background: linear-gradient(135deg, var(--mcs-lime), #38b66a) !important;
  color: #102018 !important;
  border: 1px solid rgba(22,138,67,.18) !important;
}

.btn-dark,
.admin-link {
  background: var(--mcs-night) !important;
  color: #fff !important;
  border: 1px solid var(--mcs-night) !important;
}

.btn-blue {
  background: var(--mcs-sky) !important;
  color: #0e4451 !important;
  border: 1px solid #b9dce5 !important;
}

.btn-gold {
  background: #fff4d7 !important;
  color: #71451c !important;
  border: 1px solid #eac88d !important;
}

.btn-red,
.btn-delete,
.history-actions .btn-delete {
  background: #ffe8e9 !important;
  color: var(--mcs-danger) !important;
  border-color: #ffcdd1 !important;
}

.history-item,
.compact-features article,
.simple-steps div,
.mini-card,
.step,
.table-wrap {
  border: 1px solid var(--mcs-line) !important;
  border-radius: 16px !important;
  background: var(--mcs-surface-soft) !important;
}

.history-actions a,
.history-actions button {
  background: #fff !important;
  border: 1px solid var(--mcs-line) !important;
  color: var(--mcs-ink) !important;
}

.flash {
  border-radius: 16px !important;
  border: 1px solid transparent !important;
}

.flash.success {
  background: #e8f8df !important;
  border-color: #c7e9b8 !important;
  color: #235b2d !important;
}

.flash.error {
  background: #ffe8e9 !important;
  border-color: #ffcdd1 !important;
  color: var(--mcs-danger) !important;
}

.live-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #e53e3e !important;
  box-shadow: 0 0 0 6px rgba(229,62,62,.14) !important;
}

.site-footer {
  margin: 26px 0 0 !important;
  padding: 18px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 22px !important;
  background: var(--mcs-night) !important;
  color: #e9f5e8 !important;
  box-shadow: 0 18px 42px rgba(18,34,24,.18) !important;
}

.site-footer {
  width: calc(100vw + 16px) !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  padding-left: max(18px, calc((100vw - 1380px) / 2 + 26px)) !important;
  padding-right: max(18px, calc((100vw - 1380px) / 2 + 26px)) !important;
}

.footer-brand,
.footer-links a {
  color: #e9f5e8 !important;
}

.footer-links a {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 999px !important;
  padding: 8px 10px !important;
}

.footer-app-area {
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
}

.footer-app-area .app-store-buttons {
  margin-top: 0 !important;
}

.footer-highlight-links {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.footer-highlight-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 9px 13px !important;
  border-radius: 8px !important;
  background: var(--mcs-ball) !important;
  color: var(--mcs-navy) !important;
  border: 1px solid rgba(217,239,35,.55) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.14) !important;
}

.score-table th { color: #cfeaa0 !important; }
.point-cell, .club-score-points, .green { color: #bceb3c !important; }
.server-dot.on, .club-server-dot.on { background: var(--mcs-lime) !important; border-color: var(--mcs-lime) !important; }
.winner-row { background: rgba(216,239,38,.09) !important; }
.event, .mcs-photo-item, .public-photo-item { background: rgba(255,255,255,.07) !important; }

@media (min-width: 760px) {
  .page { padding: 0 26px 26px !important; }
  .home-hero-clean { grid-template-columns: 1.08fr .92fr !important; padding: 44px !important; }
  .hero h1, .home-hero-clean h1 { font-size: 54px !important; }
}

@media (max-width: 759px) {
  .page { padding: 0 10px 10px !important; }
  .site-header,
  .topbar {
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .site-header .header-logo-row,
  .topbar {
    grid-template-columns: 1fr auto !important;
  }

  .brand-logo,
  .site-header .brand-logo {
    height: 40px !important;
    max-width: 185px !important;
  }

  .menu-toggle,
  .site-header .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .site-header .header-menu {
    display: none !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  .site-header.open .header-menu,
  .topbar.open .top-actions {
    display: flex !important;
  }

  .top-actions,
  .main-nav,
  .site-header .top-actions,
  .site-header .main-nav {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .pill,
  .site-header .pill,
  .lang-switch select,
  .lang-switch a,
  .btn {
    width: 100% !important;
  }

  .hero h1,
  .home-hero-clean h1 {
    font-size: 32px !important;
  }

  .card-pad { padding: 16px !important; }
  .site-footer { display: grid !important; }

  .site-footer {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

.site-header .main-nav .pill:first-child,
.main-nav .pill:first-child {
  width: auto !important;
  min-width: 0 !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

.site-header .header-menu .main-nav > a.pill:first-child {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.site-header .main-nav .pill:first-child.nav-active,
.main-nav .pill:first-child.nav-active {
  background: var(--mcs-navy) !important;
  border-color: var(--mcs-navy) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(9,31,50,.18) !important;
}

.logout-pill,
.site-header .logout-pill {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--mcs-navy) !important;
}

.logout-pill:hover,
.site-header .logout-pill:hover {
  background: #ffe8e9 !important;
  border-color: #ffcdd1 !important;
  color: var(--mcs-danger) !important;
}

/* Premium editorial refresh inspired by modern tennis media layouts. */
:root {
  --mcs-ink: #091f32;
  --mcs-navy: #091f32;
  --mcs-green: #159b4f;
  --mcs-green-deep: #076333;
  --mcs-ball: #d9ef23;
  --mcs-court: #ecf7e9;
  --mcs-clay: #d46b33;
  --mcs-line: #d7e4d6;
  --mcs-radius: 12px;
}

body {
  background:
    linear-gradient(90deg, rgba(9,31,50,.055) 1px, transparent 1px) center top / 108px 108px,
    linear-gradient(0deg, rgba(9,31,50,.045) 1px, transparent 1px) center top / 108px 108px,
    radial-gradient(circle at 86% 8%, rgba(217,239,35,.34), transparent 24%),
    linear-gradient(180deg, #f5fbef 0%, #ffffff 42%, #f7faf4 100%) !important;
}

.page {
  max-width: 1380px !important;
}

.site-header,
.topbar {
  border-radius: 8px !important;
  padding: 14px 18px !important;
  border-color: rgba(9,31,50,.10) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 12px 34px rgba(9,31,50,.08) !important;
}

.site-header {
  border-radius: 0 !important;
  padding-left: max(18px, calc((100vw - 1380px) / 2 + 26px)) !important;
  padding-right: max(18px, calc((100vw - 1380px) / 2 + 26px)) !important;
}

.brand-logo,
.site-header .brand-logo {
  height: 54px !important;
  max-width: 270px !important;
}

.brand-text,
.site-header .brand-text {
  color: var(--mcs-navy) !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

.pill,
.site-header .pill,
.lang-switch select,
.lang-switch a {
  border-radius: 8px !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  color: var(--mcs-navy) !important;
  border-color: rgba(9,31,50,.12) !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.pill:hover,
.lang-switch select:hover,
.lang-switch a:hover {
  border-color: var(--mcs-green) !important;
  background: #f4fbef !important;
}

.pill.nav-active,
.nav-active,
.lang-switch .active {
  background: var(--mcs-navy) !important;
  color: #fff !important;
  border-color: var(--mcs-navy) !important;
}

.home-hero-clean,
.hero {
  position: relative !important;
  border-radius: 8px !important;
  min-height: 470px !important;
  padding: 38px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 62%, rgba(9,31,50,.02) 62%),
    radial-gradient(circle at 79% 18%, rgba(217,239,35,.42), transparent 23%),
    linear-gradient(135deg, #f3fbef, #ffffff 52%, #e8f6df) !important;
  border: 1px solid rgba(9,31,50,.10) !important;
  box-shadow: 0 22px 70px rgba(9,31,50,.12) !important;
}

.home-hero-clean::before,
.hero::before {
  content: "";
  position: absolute;
  top: 28px;
  right: 28px;
  bottom: 28px;
  left: 48%;
  pointer-events: none;
  opacity: .22;
  background:
    linear-gradient(90deg, transparent 0 49.4%, var(--mcs-green) 49.4% 50.6%, transparent 50.6%),
    linear-gradient(0deg, transparent 0 12%, var(--mcs-green) 12% 13%, transparent 13% 87%, var(--mcs-green) 87% 88%, transparent 88%),
    linear-gradient(90deg, transparent 0 13%, var(--mcs-green) 13% 14%, transparent 14% 86%, var(--mcs-green) 86% 87%, transparent 87%);
}

.home-hero-copy,
.home-score-preview,
.hero > * {
  position: relative;
  z-index: 1;
}

.home-hero-copy {
  max-width: 650px !important;
}

.home-hero-clean h1,
.hero h1 {
  max-width: 660px !important;
  color: var(--mcs-navy) !important;
  font-size: clamp(36px, 4.15vw, 52px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.home-hero-clean p,
.hero p {
  max-width: 690px !important;
  color: #445b50 !important;
  font-size: 17px !important;
}

.home-main-actions {
  margin-top: 20px !important;
  gap: 8px !important;
}

.btn {
  border-radius: 8px !important;
  min-height: 50px !important;
  padding: 13px 18px !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--mcs-ball), #52c765) !important;
  color: #07160d !important;
}

.btn-dark {
  background: var(--mcs-navy) !important;
  border-color: var(--mcs-navy) !important;
}

.btn-blue {
  background: #eef8fb !important;
  color: var(--mcs-navy) !important;
}

.home-score-preview,
.score-shell {
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(217,239,35,.14), transparent 36%),
    linear-gradient(160deg, #071927, #0a3724 72%) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 28px 80px rgba(9,31,50,.30) !important;
}

.preview-live,
.live-dot + span,
.club-live-badge.active {
  background: var(--mcs-ball) !important;
  color: #102018 !important;
}

.choice-card,
.home-compact-section,
.video-section,
.live-score-section,
.card,
.club-score-card,
.history-item {
  border-radius: 8px !important;
  box-shadow: 0 12px 30px rgba(9,31,50,.07) !important;
}

.choice-card h2,
.home-compact-section h2,
.video-section h2,
.create-callout h2,
.start-match-card h2 {
  color: var(--mcs-navy) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.choice-icon,
.start-match-card .start-icon,
.simple-steps span,
.step::before {
  border-radius: 8px !important;
  background: var(--mcs-ball) !important;
  color: var(--mcs-navy) !important;
}

.home-app-downloads {
  border-radius: 8px !important;
  background: rgba(9,31,50,.06) !important;
  border: 1px solid rgba(9,31,50,.10) !important;
}

.home-app-downloads strong {
  color: var(--mcs-navy) !important;
}

.home-app-downloads p {
  color: #445b50 !important;
}

.compact-features article,
.simple-steps div,
.mini-card,
.step,
.field input,
.field select,
.field textarea {
  border-radius: 8px !important;
}

.site-footer {
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(217,239,35,.10), transparent 34%),
    var(--mcs-navy) !important;
}

@media (min-width: 760px) {
  .home-hero-clean {
    grid-template-columns: minmax(0, 1.08fr) minmax(410px, .82fr) !important;
    align-items: center !important;
  }

  .home-score-preview {
    align-self: center !important;
    margin-bottom: 0 !important;
  }

  .quick-choice,
  .compact-features,
  .simple-steps {
    gap: 18px !important;
  }
}

@media (max-width: 759px) {
  .site-header,
  .topbar {
    border-radius: 8px !important;
    padding: 10px !important;
  }

  .site-header {
    border-radius: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .brand-logo,
  .site-header .brand-logo {
    height: 44px !important;
    max-width: 210px !important;
  }

  .home-hero-clean,
  .hero {
    min-height: 0 !important;
    padding: 24px !important;
    border-radius: 8px !important;
  }

  .home-hero-clean h1,
  .hero h1 {
    font-size: 38px !important;
    line-height: 1 !important;
  }

  .home-hero-clean p,
  .hero p {
    font-size: 16px !important;
  }
}

/* Presentation pages: keep the message focused by hiding secondary explanations. */
.video-section p,
.video-head p,
.home-app-downloads p,
.benefit-card span,
.section-card > p,
.audience span,
.usecase span,
.feature-card p,
.workflow-step span,
.final-cta p,
.home-hero-clean p,
.hero p,
#club-login > p.small,
#club-register > p.small {
  display: none !important;
}

.choice-card,
.benefit-card,
.audience,
.usecase,
.workflow-step {
  align-content: start !important;
}

.home-app-downloads {
  display: grid !important;
  gap: 10px !important;
}

.preview-demo-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.preview-demo-actions button {
  min-height: 44px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.preview-demo-actions button.is-clicked {
  animation: mcsDemoTap .62s ease !important;
  background: var(--mcs-ball) !important;
  color: var(--mcs-navy) !important;
}

.preview-grid b {
  transition: transform .22s ease, color .22s ease !important;
}

.preview-grid b.green {
  transform: scale(1.08) !important;
}

@keyframes mcsDemoTap {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217,239,35,.42); }
  45% { transform: scale(.96); box-shadow: 0 0 0 8px rgba(217,239,35,.16); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217,239,35,0); }
}

.choice-card p.small {
  display: none !important;
}

.site-footer {
  border-radius: 0 !important;
}

.player-login-hero p {
  display: block !important;
}

.player-login-hero {
  min-height: 0 !important;
  padding: 20px 24px !important;
  margin-bottom: 12px !important;
  background: #fff !important;
}

.player-login-hero::before,
.player-login-hero::after {
  display: none !important;
  content: none !important;
}

.player-login-hero h1 {
  max-width: none !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  line-height: 1.06 !important;
  margin: 8px 0 !important;
}

.player-login-hero p {
  max-width: 820px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.player-login-hero + .grid {
  align-items: start !important;
  gap: 12px !important;
}

.player-login-hero + .grid .card {
  padding: 16px !important;
}

.player-login-hero + .grid .card h2 {
  margin-bottom: 10px !important;
  font-size: 20px !important;
}

.player-login-hero + .grid .field {
  margin-bottom: 9px !important;
  gap: 5px !important;
}

.player-login-hero + .grid .field input {
  padding: 11px 12px !important;
}

.player-login-hero + .grid .btn {
  min-height: 42px !important;
  padding: 11px 14px !important;
}

.club-login-hero {
  min-height: 0 !important;
  padding: 20px 24px !important;
  margin-bottom: 12px !important;
  background: #fff !important;
}

.club-login-hero::before,
.club-login-hero::after {
  display: none !important;
  content: none !important;
}

.club-login-hero h1 {
  max-width: none !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  line-height: 1.06 !important;
  margin: 0 0 8px !important;
}

.club-login-hero p {
  display: block !important;
  max-width: 860px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.donation-hero {
  min-height: 0 !important;
  padding: 20px 24px !important;
  margin-bottom: 12px !important;
  background: #fff !important;
}

.donation-hero::before,
.donation-hero::after {
  display: none !important;
  content: none !important;
}

.donation-hero h1 {
  max-width: none !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  line-height: 1.06 !important;
  margin: 0 0 8px !important;
}

.donation-hero p {
  display: block !important;
  max-width: 860px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.improvement-hero {
  min-height: 0 !important;
  padding: 20px 24px !important;
  margin-bottom: 12px !important;
  background: #fff !important;
}

.improvement-hero::before,
.improvement-hero::after {
  display: none !important;
  content: none !important;
}

.improvement-hero h1 {
  max-width: none !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  line-height: 1.06 !important;
  margin: 0 0 8px !important;
}

.improvement-hero p {
  display: block !important;
  max-width: 860px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.contact-hero {
  min-height: 0 !important;
  padding: 20px 24px !important;
  margin-bottom: 12px !important;
  background: #fff !important;
}

.contact-hero::before,
.contact-hero::after {
  display: none !important;
  content: none !important;
}

.contact-hero h1 {
  max-width: none !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  line-height: 1.06 !important;
  margin: 0 0 8px !important;
}

.contact-hero p {
  display: block !important;
  max-width: 860px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.about-hero {
  min-height: 0 !important;
  padding: 20px 24px !important;
  margin-bottom: 12px !important;
  background: #fff !important;
}

.about-hero::before,
.about-hero::after {
  display: none !important;
  content: none !important;
}

.about-hero h1 {
  max-width: none !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  line-height: 1.06 !important;
  margin: 0 0 8px !important;
}

.about-hero p {
  display: block !important;
  max-width: 860px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

@media (max-width: 759px) {
  .player-login-hero {
    padding: 16px !important;
  }

  .club-login-hero {
    padding: 16px !important;
  }

  .donation-hero {
    padding: 16px !important;
  }

  .improvement-hero {
    padding: 16px !important;
  }

  .contact-hero {
    padding: 16px !important;
  }

  .about-hero {
    padding: 16px !important;
  }
}

.features-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr) !important;
  gap: 28px !important;
  align-items: center !important;
}

.features-hero-copy {
  min-width: 0 !important;
}

.features-hero-animation {
  min-height: 330px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.feature-court {
  position: relative !important;
  width: min(100%, 390px) !important;
  aspect-ratio: 1 / .82 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22) 2px, transparent 2px) 50% 0 / 50% 100%,
    linear-gradient(0deg, rgba(255,255,255,.16) 2px, transparent 2px) 0 50% / 100% 50%,
    linear-gradient(135deg, #0c4b30, #176b3b 58%, #b9d61e) !important;
  border: 2px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 26px 70px rgba(9,31,50,.20) !important;
}

.feature-court::before,
.feature-court::after {
  content: "" !important;
  position: absolute !important;
  inset: 24px !important;
  border: 2px solid rgba(255,255,255,.62) !important;
  border-radius: 4px !important;
}

.feature-court::after {
  inset: 24px 50% 24px 24px !important;
  border-right: 2px solid rgba(255,255,255,.62) !important;
}

.court-line {
  position: absolute !important;
  display: block !important;
  background: rgba(255,255,255,.68) !important;
}

.court-line.net {
  left: 50% !important;
  top: 0 !important;
  width: 3px !important;
  height: 100% !important;
  transform: translateX(-50%) !important;
}

.court-line.service-x {
  left: 24px !important;
  right: 24px !important;
  top: 50% !important;
  height: 2px !important;
}

.court-line.service-y {
  top: 24px !important;
  bottom: 24px !important;
  left: 28% !important;
  width: 2px !important;
}

.tennis-ball-demo {
  position: absolute !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 34% 28%, #ffff8a, var(--mcs-ball) 58%, #a8bf08) !important;
  box-shadow: 0 0 0 7px rgba(217,239,35,.18), 0 14px 26px rgba(0,0,0,.24) !important;
  animation: mcsFeatureBall 3.4s ease-in-out infinite !important;
}

.tennis-ball-demo::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px 9px !important;
  border-left: 2px solid rgba(255,255,255,.8) !important;
  border-right: 2px solid rgba(255,255,255,.8) !important;
  border-radius: 50% !important;
  transform: rotate(28deg) !important;
}

.racket-demo {
  position: absolute !important;
  right: 24px !important;
  bottom: 22px !important;
  width: 70px !important;
  height: 94px !important;
  border: 5px solid #091f32 !important;
  border-radius: 50% !important;
  transform: rotate(-24deg) !important;
  animation: mcsFeatureRacket 3.4s ease-in-out infinite !important;
}

.racket-demo::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 100% !important;
  width: 9px !important;
  height: 54px !important;
  border-radius: 999px !important;
  background: #091f32 !important;
  transform: translateX(-50%) !important;
}

.score-demo-mini {
  position: absolute !important;
  left: 24px !important;
  bottom: 22px !important;
  display: grid !important;
  gap: 5px !important;
  min-width: 110px !important;
  padding: 11px !important;
  border-radius: 8px !important;
  background: rgba(9,31,50,.86) !important;
  color: #fff !important;
  font-weight: 950 !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.24) !important;
}

.score-demo-mini strong {
  width: max-content !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;
  background: var(--mcs-ball) !important;
  color: var(--mcs-navy) !important;
  font-size: 11px !important;
}

.score-demo-mini span {
  display: block !important;
  color: #fff !important;
  font-size: 15px !important;
  letter-spacing: .08em !important;
}

@keyframes mcsFeatureBall {
  0%, 100% { left: 14%; top: 18%; transform: scale(1); }
  35% { left: 45%; top: 58%; transform: scale(1.08); }
  68% { left: 78%; top: 26%; transform: scale(.94); }
}

@keyframes mcsFeatureRacket {
  0%, 100% { transform: rotate(-24deg) translateY(0); }
  35% { transform: rotate(-15deg) translateY(-12px); }
  68% { transform: rotate(-30deg) translateY(4px); }
}

@media (max-width: 759px) {
  .features-hero {
    grid-template-columns: 1fr !important;
  }

  .features-hero-animation {
    min-height: 250px !important;
  }

  .feature-court {
    width: 100% !important;
    max-width: 360px !important;
  }
}

/* Must stay last: connected top navigation fixes. */
.site-header .header-menu .main-nav > a.pill:first-child,
.site-header .main-nav > a.pill:first-child,
.main-nav > a.pill:first-child {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  height: auto !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.site-header .header-menu .main-nav > a.pill:first-child.nav-active,
.site-header .main-nav > a.pill:first-child.nav-active,
.main-nav > a.pill:first-child.nav-active {
  background: var(--mcs-navy) !important;
  border-color: var(--mcs-navy) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(9,31,50,.18) !important;
}

.site-header .logout-pill,
.logout-pill {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

/* Final full-width shell override for connected and public pages. */
.page {
  overflow-x: visible !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important;
}

.site-header {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 calc(50% - 50vw) 18px calc(50% - 50vw) !important;
  padding-left: max(18px, calc((100vw - 1380px) / 2 + 26px)) !important;
  padding-right: max(18px, calc((100vw - 1380px) / 2 + 26px)) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
}

.site-footer {
  width: 100vw !important;
  max-width: none !important;
  margin: 28px calc(50% - 50vw) 0 calc(50% - 50vw) !important;
  padding-left: max(18px, calc((100vw - 1380px) / 2 + 26px)) !important;
  padding-right: max(18px, calc((100vw - 1380px) / 2 + 26px)) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}

.site-footer {
  margin-top: auto !important;
}

@media (max-width: 759px) {
  .site-header {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .site-footer {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (min-width: 760px) {
  .site-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 18px !important;
  }

  .site-header .header-logo-row {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .site-header .header-menu {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .site-header .top-actions {
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
  }

  .site-header .menu-toggle {
    display: none !important;
  }
}