:root {
  --landing-ink: #082b5c;
  --landing-blue: #0057b8;
  --landing-sky: #5bc8f5;
  --landing-green: #00a66a;
  --landing-red: #ef5a4c;
  --landing-yellow: #ffd447;
  --landing-cream: #fff9ee;
  --landing-paper: #f5fbff;
  --landing-card: #ffffff;
  --landing-line: #b9cfe1;
  --landing-muted: #405b73;
}

.landing-body {
  background: var(--landing-cream);
  color: var(--landing-ink);
  font-family: Manrope, "Microsoft YaHei", "PingFang SC", sans-serif;
}

.landing-main { width: 100%; max-width: 100%; overflow-x: clip; }
.landing-preview-mode .local-login-section { display:none; }
/* V1 stadium: white only on the photo; opaque light surfaces keep dark text. */
html[data-landing="v1"] { --landing-ink:#141b18; --landing-muted:#39453f; }
html[data-landing="v1"] .hero-section { background:#10221e; }
html[data-landing="v1"] .hero-backdrop {
  background:linear-gradient(90deg,rgba(7,20,16,.76),rgba(7,20,16,.60)),url('/assets/media/prairie-stadium-v1.jpg') center 62% / cover no-repeat;
}
html[data-landing="v1"] .hero-backdrop::before,
html[data-landing="v1"] .hero-backdrop > * { display:none; }
html[data-landing="v1"] .hero-copy h1,
html[data-landing="v1"] .hero-kicker,
html[data-landing="v1"] .hero-footnote { color:#fff; }
html[data-landing="v1"] .hero-copy h1 { text-shadow:0 2px 22px rgba(0,0,0,.25); }
html[data-landing="v1"] .hero-support { background:#fff; backdrop-filter:none; }
html[data-landing="v1"] .hero-lede,
html[data-landing="v1"] .hero-secondary { color:var(--landing-ink); }
.public-nav {
  position: fixed; z-index: 40; top: 18px; left: 50%;
  width: min(1160px, calc(100% - 32px)); min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 8px 9px 8px 18px; border: 1px solid rgba(0,87,184,.2);
  border-radius: 18px; background: rgba(255,255,255,.9);
  box-shadow: 0 16px 46px rgba(8,43,92,.12); backdrop-filter: blur(20px);
  transform: translateX(-50%);
}
.public-nav .wordmark { color: var(--landing-ink); }
.brand-lockup { display: flex; align-items: baseline; gap: 10px; }
.brand-lockup small { color: var(--landing-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.public-nav nav { display: flex; align-items: center; gap: 8px; }
.public-nav nav > a {
  min-height: 46px; display: inline-flex; align-items: center; padding: 0 15px;
  border-radius: 11px; color: var(--landing-ink); font-size: 14px; font-weight: 700;
  text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-version {
  padding: 4px 8px; border: 1px solid var(--landing-line); border-radius: 999px;
  color: var(--landing-muted); font: 10px/1.4 Consolas, monospace; white-space: nowrap;
}
.public-nav .nav-link:hover { background: #eaf6ff; }
.public-nav .nav-cta { border: 1px solid #e5b900; background: var(--landing-yellow); color: var(--landing-ink); }
.public-nav .nav-cta:hover { border-color: var(--landing-ink); background: #ffe36f; color: var(--landing-ink); }
.public-nav .icon-button { border-color: var(--landing-line); background: #fff; color: var(--landing-blue); }
.public-nav .icon-button:hover { border-color: var(--landing-blue); background: #eaf6ff; }

.hero-section {
  position: relative; min-height: clamp(700px, 100svh, 860px); display: grid; place-items: center;
  padding: 140px max(22px,4vw) 108px; isolation: isolate; overflow: clip;
  background: linear-gradient(135deg,#fff9ee 0 38%,#eaf8ff 38% 76%,#fff 76%);
}
.hero-backdrop { position: absolute; z-index: -1; inset: 0; overflow: clip; }
.hero-backdrop::before {
  content: ""; position: absolute; inset: 8% 7% 10%;
  border: 2px solid rgba(0,87,184,.15); border-radius: 46% 54% 42% 58% / 53% 42% 58% 47%;
}
.host-shape { position: absolute; display: block; border-radius: 50%; opacity: .92; }
.host-shape-one { width: min(38vw,520px); aspect-ratio: 1; top: -20%; right: -8%; background: var(--landing-red); }
.host-shape-two { width: min(29vw,390px); aspect-ratio: 1; left: -10%; bottom: -22%; background: var(--landing-green); }
.pitch-line { position: absolute; display: block; border: 2px solid rgba(0,87,184,.2); }
.pitch-line-center { width: 28vw; height: 28vw; min-width: 280px; min-height: 280px; left: 47%; top: 51%; border-radius: 50%; transform: translate(-50%,-50%); }
.pitch-line-center::after { content: ""; position: absolute; width: 9px; height: 9px; left: 50%; top: 50%; border-radius: 50%; background: var(--landing-blue); transform: translate(-50%,-50%); }
.pitch-line-box { width: 24vw; height: 56%; min-width: 260px; right: -8%; top: 22%; border-right: 0; border-radius: 120px 0 0 120px; }
.tournament-ball { position: absolute; right: clamp(26px,7vw,130px); top: 50%; color: var(--landing-blue); transform: translateY(-46%) rotate(-7deg); filter: drop-shadow(0 28px 36px rgba(8,43,92,.16)); }
.tournament-ball svg { width: clamp(230px,27vw,390px); height: auto; fill: #fff; stroke: currentColor; stroke-width: 2.2; }
.tournament-ball .football-panel { fill: var(--landing-yellow); stroke: var(--landing-blue); }
.hero-copy {
  position: relative; z-index: 2; width: min(1120px,100%); margin: auto; display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(290px,.75fr);
  gap: clamp(42px,7vw,96px); align-items: end; text-align: left;
}
.hero-kicker, .section-kicker, .dialog-kicker {
  margin: 0 0 20px; color: var(--landing-blue); font-size: 12px;
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.hero-kicker { grid-column: 1 / -1; margin-bottom: -14px; }
.hero-copy h1 {
  max-width: 720px; margin: 0; color: var(--landing-ink); font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(48px,5.2vw,68px); font-weight: 700; line-height: 1.04;
  letter-spacing: -.052em; text-wrap: balance;
}
.hero-support {
  position: relative; padding: 24px; border: 1px solid rgba(0,87,184,.24); border-radius: 18px;
  background: rgba(255,255,255,.86); box-shadow: 0 20px 60px rgba(8,43,92,.1); backdrop-filter: blur(14px);
}
.hero-support::before { content: ""; position: absolute; width: 48px; height: 7px; left: 24px; top: -4px; border-radius: 999px; background: var(--landing-red); }
.hero-lede { max-width: 470px; margin: 0; color: #29465f; font-size: clamp(16px,1.4vw,18px); line-height: 1.72; }
.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 28px; }
.hero-primary { min-height: 56px; padding-inline: 22px; border-color: #d4aa00; background: var(--landing-yellow); color: var(--landing-ink); }
.hero-primary:hover { border-color: var(--landing-ink); background: #ffe36f; }
.hero-secondary { min-height: 48px; display: inline-flex; align-items: center; color: var(--landing-blue); font-size: 14px; font-weight: 750; text-underline-offset: 6px; }
.hero-footnote {
  position: absolute; bottom: 24px; left: 50%; width: min(720px,calc(100% - 40px));
  margin: 0; display: flex; align-items: center; justify-content: center; color: var(--landing-muted);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-align: center;
  transform: translateX(-50%);
}
.hero-footnote span { display: inline-flex; align-items: center; }
.hero-footnote span + span::before { content: ""; width: 6px; height: 6px; margin: 0 16px; border-radius: 50%; background: var(--landing-red); }

.local-login-section { width: min(1160px,calc(100% - 32px)); margin: 112px auto 28px; padding: clamp(20px,3vw,32px); border: 1px solid var(--landing-line); border-radius: 22px; background: var(--landing-card); box-shadow: 0 16px 42px rgba(8,43,92,.08); scroll-margin-top: 104px; }
.local-login-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.local-login-kicker { margin: 0 0 8px; color: var(--landing-blue); font: 800 11px/1.5 Manrope,sans-serif; letter-spacing: .12em; }
.local-login-heading h2 { margin: 0; font-size: clamp(24px,2.8vw,32px); letter-spacing: -.04em; }
.local-login-heading h2:focus { outline: none; }
.local-login-heading p:last-child { margin: 8px 0 0; color: var(--landing-muted); font-size: 14px; line-height: 1.6; }
.local-login-pill { flex: none; padding: 7px 11px; border: 1px solid #a6d8bd; border-radius: 999px; background: #e8f8ee; color: #07563a; font-size: 11px; font-weight: 800; white-space: nowrap; }
.local-user-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.local-user-button { min-width: 0; min-height: 122px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 15px; border: 1px solid var(--landing-line); border-radius: 14px; background: var(--landing-paper); color: var(--landing-ink); text-align: left; cursor: pointer; touch-action: manipulation; transition: border-color .15s ease,background .15s ease,box-shadow .15s ease; }
.local-user-button:hover { border-color: var(--landing-blue); background: #eaf6ff; box-shadow: 0 8px 20px rgba(8,43,92,.1); }
.local-user-button:focus-visible { outline: 3px solid var(--landing-blue); outline-offset: 3px; }
.local-user-button:active { background: #dcefff; }
.local-user-button:disabled { opacity: .55; cursor: wait; }
.local-user-avatar { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--landing-blue); color: #fff; font-size: 12px; font-weight: 800; }
.local-user-button[data-mock-role="admin"] .local-user-avatar { background: var(--landing-ink); }
.local-user-info { min-width: 0; display: grid; gap: 2px; }
.local-user-info strong { font-size: 14px; }
.local-user-info small { color: var(--landing-muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.local-user-tag { color: var(--landing-blue); font-size: 11px; font-weight: 800; }
.local-login-status { min-height: 20px; margin: 14px 0 0; color: var(--landing-muted); font-size: 13px; line-height: 1.5; }
@media(max-width:1040px) { .local-user-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:700px) { .local-login-section { width: calc(100% - 20px); margin-block: 142px 24px; scroll-margin-top: 144px; } .local-login-heading { flex-direction: column; gap: 10px; } .local-user-grid { grid-template-columns: 1fr; } .local-user-button { min-height: 72px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; } .local-user-info small { font-size: 12px; } }

.league-marquee { overflow: clip; border-block: 2px solid var(--landing-ink); background: var(--landing-blue); }
.league-marquee > div { width: max-content; padding: 15px 0; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .15em; white-space: nowrap; will-change: transform; }
.public-pricing { width: min(1180px,calc(100% - 40px)); margin: 0 auto; padding: clamp(72px,8vw,108px) 0 clamp(86px,9vw,128px); }
.pricing-heading { max-width: 760px; margin-bottom: 32px; }
.pricing-heading h2 { margin: 0; color: var(--landing-ink); font-family: "Source Serif 4", Georgia, serif; font-size: clamp(36px,4vw,52px); line-height: 1.08; letter-spacing: -.04em; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.pricing-card { min-height: 190px; padding: 26px; display: flex; flex-direction: column; border: 1px solid var(--landing-line); border-radius: 18px; background: #fff; }
.pricing-card strong { color: var(--landing-ink); font-size: 24px; }
.pricing-card > span { margin-top: 10px; color: var(--landing-muted); font-size: 13px; }
.pricing-card > b { margin-top: auto; color: var(--landing-blue); font-size: 32px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.pricing-reference { margin-top: 7px; color: var(--landing-muted); font-size: 13px; font-weight: 650; line-height: 1.45; font-variant-numeric: tabular-nums; }
.pricing-payment { display: grid; gap: 5px; margin-top: 18px; padding: 16px 18px; border-left: 4px solid var(--landing-blue); border-radius: 10px; background: #eef6fc; color: var(--landing-ink); font-size: 14px; line-height: 1.55; }
.pricing-payment span { color: var(--landing-muted); font-size: 13px; }
.pricing-note { margin: 18px 0 0; color: var(--landing-muted); font-size: 13px; line-height: 1.6; }
.pricing-note a, .footer-contact a { color: var(--landing-blue); text-underline-offset: 3px; }

.site-footer {
  width: min(1180px,calc(100% - 40px)); margin: 0 auto; padding: 42px 0 50px;
  display: grid; grid-template-columns: 1fr; gap: 28px;
  border-top: 1px solid var(--landing-line); color: var(--landing-ink);
}
.site-footer p { margin: 10px 0 0; color: var(--landing-muted); font-size: 13px; }
.site-footer small { color: var(--landing-muted); }
.footer-contact { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--landing-muted); font-size: 13px; }
.footer-mark { color: var(--landing-ink); }
.footer-utility { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 13px; }
.footer-utility > a { display: inline-flex; min-height: 44px; align-items: center; color: var(--landing-blue); font-weight: 700; text-underline-offset: 3px; }
.footer-language-links { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-language-links a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 12px; border: 1px solid var(--landing-line); border-radius: 999px; color: var(--landing-ink); text-decoration: none; font-weight: 650; }
.footer-language-links a[aria-current="page"] { border-color: var(--landing-blue); background: #eaf6ff; color: var(--landing-blue); }
.footer-utility a:focus-visible { outline: 3px solid var(--landing-blue); outline-offset: 3px; }

.login-dialog { width: min(440px,calc(100% - 32px)); padding: 0; border: 1px solid var(--landing-line); border-radius: 22px; background: #fff; color: var(--landing-ink); box-shadow: 0 30px 90px rgba(8,43,92,.28); }
.login-dialog::backdrop { background: rgba(8,43,92,.56); backdrop-filter: blur(8px); }
.login-card { position: relative; padding: 40px; }
.login-card h2 { margin: 0; font-size: 34px; letter-spacing: -.04em; }
.login-card > p:not(.dialog-kicker) { color: var(--landing-muted); }
.dialog-kicker { color: var(--landing-blue); }
.dialog-close { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #eaf6ff; color: var(--landing-blue); }
.dialog-close:hover { background: #d8efff; }
#google-signin { min-height: 44px; margin: 24px 0 10px; }
.login-status { min-height: 24px; margin: 8px 0; color: var(--red); font-size: 13px; }
.privacy-note { font-size: 11px; }
.privacy-note a { color: inherit; }

.legal-body { background: var(--landing-cream); color: var(--landing-ink); font-family: Manrope,"Microsoft YaHei","PingFang SC",sans-serif; }
.legal-body .public-nav { position: absolute; }
.legal-page { width: min(1040px,calc(100% - 40px)); min-height: 75vh; margin: 0 auto; padding: 150px 0 110px; }
.legal-header { max-width: 760px; margin-bottom: 58px; }
.legal-header p { margin: 0 0 14px; color: var(--landing-blue); font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.legal-page h1 { margin: 0; font-family: "Source Serif 4",Georgia,serif; font-size: clamp(46px,6vw,70px); line-height: 1; letter-spacing: -.05em; }
.legal-intro { max-width: 680px; margin: 24px 0 0; color: var(--landing-muted); font-size: 18px; }
.policy-index { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 58px; }
.policy-index a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--landing-line); border-radius: 999px; color: var(--landing-ink); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .2s ease,border-color .2s ease; }
.policy-index a:hover { border-color: var(--landing-blue); background: #eaf6ff; }
.policy-list { border-top: 1px solid var(--landing-line); }
.policy-section { display: grid; grid-template-columns: minmax(210px,.72fr) minmax(0,1.28fr); gap: 42px; padding: 52px 0; border-bottom: 1px solid var(--landing-line); scroll-margin-top: 32px; }
.policy-section h2 { margin: 0; font-size: clamp(26px,3vw,38px); line-height: 1.15; letter-spacing: -.035em; }
.policy-copy p { max-width: 690px; margin: 0 0 16px; color: #29465f; font-size: 16px; line-height: 1.8; }
.policy-copy p:last-child { margin-bottom: 0; }
.policy-copy a { color: var(--landing-blue); font-weight: 700; }
html[data-landing="v2"] .hero-section { background: linear-gradient(145deg,#fff 0 42%,#e6f7f0 42% 72%,#fff7d6 72%); }
html[data-landing="v2"] .league-marquee { background: var(--landing-green); }
html[data-landing="v2"] .value-card[open] { background: #eefbf5; border-color: var(--landing-green); }

@media (max-width: 900px) {
  .public-nav { top: 10px; width: calc(100% - 20px); padding-left: 15px; }
  .hero-section { min-height: 800px; padding-top: 128px; }
  .hero-copy { display: block; text-align: center; }
  .hero-kicker { margin-bottom: 18px; }
  .hero-copy h1 { max-width: 720px; margin-inline: auto; font-size: clamp(44px,8vw,60px); }
  .hero-support { max-width: 580px; margin: 30px auto 0; text-align: left; }
  .hero-actions { justify-content: flex-start; }
  .tournament-ball { right: -90px; top: 46%; opacity: .17; }
  .policy-section { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 560px) {
  .public-nav { min-height: 58px; gap: 8px; padding-left: 12px; }
  .brand-lockup small, .public-nav .icon-button { display: none; }
  .public-nav nav { gap: 3px; }
  .nav-version { padding-inline: 6px; font-size: 9px; }
  .public-nav nav > a { padding-inline: 8px; font-size: 12px; }
  .public-nav .nav-cta { padding-inline: 10px; font-size: 12px; }
  .hero-section { min-height: 740px; padding: 112px 18px 82px; }
  .hero-copy h1 { font-size: clamp(36px,10.4vw,42px); line-height: 1.07; letter-spacing: -.043em; }
  .hero-lede { font-size: 16px; }
  .hero-support { padding: 20px; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .hero-secondary { justify-content: center; }
  .hero-footnote { bottom: 18px; font-size: 9px; letter-spacing: .02em; }
  .hero-footnote span + span::before { margin-inline: 8px; }
  .host-shape-one { width: 260px; top: -90px; right: -150px; }
  .host-shape-two { width: 220px; left: -140px; bottom: -80px; }
  .public-pricing, .site-footer, .legal-page { width: calc(100% - 28px); }
  .pricing-heading h2 { font-size: 34px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card { min-height: 0; padding: 20px; }
  .pricing-card > b { font-size: 26px; }
  .login-card { padding: 36px 22px; }
  .legal-page { padding-top: 128px; }
  .legal-header, .policy-index { margin-bottom: 40px; }
  .policy-section { padding: 38px 0; }
}

@media (max-width: 390px) {
  .nav-version { display: none; }
  .public-nav { padding-left: 10px; }
  .public-nav nav > a { padding-inline: 7px; }
  .football-mark { width: 27px; height: 27px; flex-basis: 27px; }
  .football-mark svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .tournament-ball { transform: translateY(-46%) rotate(-7deg); }
}

/* v3.2: keep the language control visually centered independent of side content. */
.public-nav { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
.public-nav .wordmark { justify-self: start; }
.public-nav .locale-control { justify-self: center; }
.public-nav nav { justify-self: end; }
@media (max-width: 1100px) {
  .public-nav .brand-lockup small { display: none; }
}

@media (max-width: 760px) {
  .public-nav { min-height: 104px; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 48px 44px; gap: 4px 8px; padding: 5px 8px 7px 12px; }
  .public-nav .locale-control { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .public-nav .locale-control select { width: min(190px,100%); }
  .hero-section { padding-top: 152px; }
  .legal-page { padding-top: 152px; }
}