:root { color-scheme:dark light; --ink:#f2fbf3; --muted:#c2d4c8; --green:#80edae; --sun:#ffe27a; --deep:#002015; --card:#12281d; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--deep); font-family:"Nunito Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; font-weight:600; }
main { position:relative; min-height:100dvh; overflow:clip; max-width:1160px; margin:auto; padding:28px 44px 32px; }
nav { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; font-size:0.75rem; letter-spacing:.13em; color:var(--muted); }
.nav-tools { display:flex; align-items:center; gap:14px; }.language-picker { display:flex; gap:2px; padding:3px; border:1px solid #b9fbd22b; border-radius:12px; background:#062c1d; }.language-picker button { min-width:34px; padding:6px 7px; border:0; border-radius:8px; color:var(--muted); background:transparent; font:800 10px/1 "Nunito Sans",sans-serif; letter-spacing:.06em; cursor:pointer; }.language-picker button[aria-pressed="true"] { color:#003820; background:var(--green); }
.wordmark { display:flex; align-items:center; gap:9px; color:var(--ink); line-height:1; text-decoration:none; } .wordmark img { width:35px; height:35px; border-radius:11px; object-fit:cover; } .wordmark span { font-family:Fredoka,ui-sans-serif,sans-serif; font-size:1.5rem; font-weight:600; letter-spacing:-.045em; }
.hero { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,24.375rem) minmax(0,1fr); align-items:center; gap:30px; min-height:600px; margin:34px -44px 0; padding-right:36px; overflow:hidden; border-radius:32px; background:#153725; }
.hero-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:calc(100% + 40px) 42%; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#061b11fa 0%,#061b11ef 34%,#061b11d9 62%,#061b11cc 100%); pointer-events:none; }
.hero-copy { position:relative; z-index:1; max-width:100%; margin:46px 0 46px 36px; padding:28px 28px; border:1px solid rgba(197,255,213,0.22); border-radius:26px; background:rgba(8,36,25,0.76); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 20px 44px rgba(2,17,8,0.42); }
.kicker { margin:0; color:var(--sun); font-size:0.6875rem; font-weight:800; letter-spacing:.1em; }
h1,h2 { font-family:Fredoka,ui-sans-serif,sans-serif; } h1 { margin:14px 0 18px; font-size:clamp(3.25rem,6.6vw,4.875rem); line-height:.94; letter-spacing:-.045em; font-weight:600; text-wrap:balance; overflow-wrap:break-word; }
.lede { max-width:470px; color:var(--muted); font-size:1.0625rem; line-height:1.52; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:34px; }
.download { display:inline-flex; align-items:center; gap:16px; padding:15px 24px 15px 18px; border-radius:16px; color:#0b2216; background:var(--green); text-decoration:none; font-weight:750; box-shadow:0 16px 50px #0006; transition:transform .18s ease,box-shadow .18s ease; }
.download:hover { transform:translateY(-2px); box-shadow:0 20px 56px #0007; }
.download-icon { display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border-radius:11px; background:#0b22161f; }
.download-icon svg { width:20px; height:20px; }
.download-text { display:flex; flex-direction:column; gap:2px; line-height:1.15; }
.download-text strong { font-size:1rem; font-weight:800; }
.download-text small { font-size:0.75rem; font-weight:700; opacity:.72; }
.features { position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:18px; }
.account { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.8fr); gap:56px; align-items:center; margin-top:76px; padding:52px; border:1px solid #d4ffe32e; border-radius:30px; background:#062b1d; }
.account-intro h2 { max-width:560px; margin:10px 0 16px; font-size:clamp(2.125rem,4.5vw,3.625rem); line-height:.96; }
.account-intro>p:last-child { max-width:570px; margin:0; color:var(--muted); font-size:1rem; line-height:1.55; }
.account-label { margin:0; color:var(--sun); font-size:0.6875rem; font-weight:800; letter-spacing:.1em; }
.account-panel { padding:24px; border-radius:22px; background:#12432f; }
.account-panel form { display:grid; gap:15px; }.account-panel label { display:grid; gap:7px; color:var(--muted); font-size:0.75rem; font-weight:800; letter-spacing:.04em; }
.account-panel input { width:100%; min-height:50px; padding:12px 14px; border:1px solid #b9fbd244; border-radius:13px; outline:0; color:var(--ink); background:#002015; font:700 16px "Nunito Sans",sans-serif; caret-color:var(--green); }
.account-panel input:focus { border-color:var(--green); box-shadow:0 0 0 3px #7ce5aa26; }
.account-panel button { min-height:50px; padding:12px 16px; border:0; border-radius:13px; color:#003820; background:var(--green); font:800 14px "Nunito Sans",sans-serif; cursor:pointer; }
.account-panel button:disabled { opacity:.55; cursor:wait; }.account-panel button:focus-visible { outline:3px solid var(--sun); outline-offset:3px; }
.field-error { min-height:0; margin:-8px 0 0; color:#ffb27a; font-size:0.75rem; font-weight:700; line-height:1.35; }
.field-error:empty { display:none; }
.account-panel input[aria-invalid="true"] { border-color:#ffb27a; }
#account-status { min-height:20px; margin:13px 0 0; color:var(--muted); font-size:0.8125rem; }#account-status[data-error="true"] { color:#ffb27a; }
#account-person { margin:0 0 16px; font-size:1.0625rem; }.account-panel [hidden] { display:none; }
.section-label { margin:0; color:var(--sun); font-size:0.6875rem; font-weight:800; letter-spacing:.1em; }
.text-link { display:inline-block; margin-top:18px; padding:12px 20px; border:1px solid var(--green); border-radius:14px; color:var(--green); text-decoration:none; font-weight:800; font-size:0.875rem; }
.text-link:hover { color:#0b2216; background:var(--green); }
.courses-promo { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); gap:48px; align-items:center; margin-top:72px; padding:46px 52px; border:1px solid #d4ffe32e; border-radius:30px; background:#062b1d; }
.courses-copy h2 { max-width:520px; margin:10px 0 14px; font-size:clamp(1.875rem,3.9vw,2.875rem); line-height:1; }
.courses-copy>p { max-width:540px; margin:0; color:var(--muted); font-size:1rem; line-height:1.55; }
.stat-row { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.stat-row li { display:flex; flex-direction:column; gap:3px; padding:16px 20px; border-radius:20px; background:#12432f; }
.stat-row strong { font-family:Fredoka,ui-sans-serif,sans-serif; font-size:1.875rem; font-weight:600; line-height:1; letter-spacing:-.03em; }
.stat-row span { color:var(--muted); font-size:0.75rem; font-weight:700; letter-spacing:.05em; }
/* One game being scored, beside the names of the rest. Six paragraphs of rules
   is a thing nobody reads on a landing page; a board is read at a glance. */
.games { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.85fr); gap:44px; align-items:center; margin-top:72px; }
.games-intro h2 { max-width:620px; margin:10px 0 14px; font-size:clamp(1.875rem,3.9vw,2.875rem); line-height:1; }
.games-intro>p { max-width:640px; margin:0 0 22px; color:var(--muted); font-size:1rem; line-height:1.55; }
.game-strip { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.game-strip li { display:grid; grid-template-columns:minmax(140px,auto) 1fr; align-items:baseline; gap:14px; padding:9px 0; border-top:1px solid #d4ffe31f; }
.game-strip strong { font-family:Fredoka,ui-sans-serif,sans-serif; font-size:1rem; font-weight:600; letter-spacing:-.02em; }
.game-strip span { color:var(--muted); font-size:0.875rem; line-height:1.4; }
.skins { padding:22px; border:1px solid #d4ffe32e; border-radius:26px; background:#062b1d; box-shadow:0 24px 52px rgba(2,17,8,0.5); }
.skins__head { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.skins__title { font-family:Fredoka,ui-sans-serif,sans-serif; font-size:1.1875rem; font-weight:600; color:#f2fbf3; }
.skins__rows { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.skins__rows li { display:grid; grid-template-columns:minmax(58px,auto) 1fr auto; align-items:center; gap:14px; padding:11px 13px; border-radius:14px; background:#12432f; }
.skins__name { color:#f2fbf3; font-size:0.875rem; font-weight:700; }
.skins__score { color:#f2fbf3; font-size:0.875rem; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.skins__pot { margin:14px 0 0; color:#b9d0c0; font-size:0.8125rem; font-weight:700; }
.team-match { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.9fr); gap:48px; align-items:center; margin-top:72px; padding:46px 52px; border:1px solid #d4ffe32e; border-radius:30px; background:#062b1d; }
.team-copy h2 { max-width:520px; margin:10px 0 14px; font-size:clamp(1.75rem,3.4vw,2.5rem); line-height:1.02; }
.team-copy>p { max-width:560px; margin:0 0 22px; color:var(--muted); font-size:1rem; line-height:1.55; }
.team-points { margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.team-points li { position:relative; padding-left:24px; color:var(--muted); font-size:0.875rem; line-height:1.5; }
.team-points li::before { content:""; position:absolute; top:.5em; left:0; width:9px; height:9px; border-radius:50%; background:var(--green); }
.team-shots { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.team-shots figure { margin:0; }
.team-shots img { display:block; width:100%; height:auto; border:1px solid #d4ffe31f; border-radius:18px; box-shadow:0 26px 56px #0007; }
.team-shots figcaption { margin-top:9px; color:var(--muted); font-size:0.75rem; font-weight:700; text-align:center; }
article { padding:0 20px 22px; overflow:hidden; border:1px solid #d4ffe31f; border-radius:24px; background:var(--card); box-shadow:0 18px 42px #0000001f; }
.card-art { aspect-ratio:1 / 1; margin:0 -20px 19px; background-size:cover; background-position:center; }
.feature-score .card-art { background-image:url('/assets/scorecard-card-v2.webp'); background-position:center 42%; }
.feature-group .card-art { background-image:url('/assets/nearby-group-card-v2.webp'); }
.feature-pace .card-art { background-image:url('/assets/quick-score-card-v2.webp'); }
.feature-games .card-art { background-image:url('/assets/games-card-v1.webp'); }
h2 { margin:0 0 8px; font-size:1.5625rem; line-height:1.04; letter-spacing:-.025em; font-weight:600; } article p { margin:0; color:var(--muted); line-height:1.48; font-size:0.875rem; }
footer { position:relative; z-index:1; margin-top:82px; color:var(--muted); font-size:0.6875rem; letter-spacing:.13em; } footer span { color:var(--green); padding:0 8px; } footer a { color:var(--ink); text-decoration:none; }
.orb { position:absolute; width:620px; height:620px; border-radius:50%; filter:blur(8px); opacity:.34; pointer-events:none; }.orb-one { top:-290px; right:-250px; background:#1b7650; }.orb-two { bottom:-430px; left:-320px; background:#0c4c36; }
@media (max-width:650px) { main { padding:23px 20px 28px; }.wordmark { gap:7px; }.wordmark img { width:32px; height:32px; }.wordmark span { font-size:1.375rem; }.nav-tools { gap:8px; font-size:0.625rem; }.language-picker button { min-width:30px; }.hero { display:block; margin:25px -20px 0; min-height:auto; padding-right:0; border-radius:0; }.hero-art { position:relative; height:330px; }.hero::after { inset:0 0 auto; height:330px; }.hero-round { margin:0 16px 18px; padding:16px; }.hero-round__players li { padding:7px 10px; }.hero-art { object-position:center 30%; }.hero::after { background:linear-gradient(180deg,transparent 0%,transparent 35%,rgba(6,27,17,0.45) 55%,rgba(6,27,17,0.92) 100%); }.hero-copy { position:relative; right:auto; bottom:auto; left:auto; margin:0 16px 16px; max-width:none; margin:0; padding:18px 19px 20px; border-radius:22px; background:rgba(8,36,25,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .kicker { font-size:0.625rem; } h1 { margin:9px 0 10px; font-size:2.375rem; line-height:.96; }.lede { font-size:0.8125rem; line-height:1.4; }.actions { gap:10px; margin-top:17px; }.download { padding:12px 18px 12px 14px; border-radius:14px; gap:12px; }.download-icon { width:34px; height:34px; }.features { grid-template-columns:1fr; } article { min-height:auto; } .card-art { aspect-ratio:1 / 1; }.courses-promo { grid-template-columns:1fr; gap:24px; margin:42px -4px 0; padding:26px 20px; }.courses-copy h2 { font-size:1.875rem; }.stat-row { grid-template-columns:repeat(3,1fr); gap:8px; }.stat-row li { padding:13px 12px; }.stat-row strong { font-size:1.3125rem; }.stat-row span { font-size:0.6875rem; }.games { display:block; margin-top:44px; }.games-intro h2 { font-size:1.875rem; }.game-strip li { grid-template-columns:1fr; gap:2px; }.skins { margin-top:24px; padding:16px; }.skins__rows li { grid-template-columns:minmax(52px,auto) 1fr auto; gap:10px; padding:10px; }.team-match { grid-template-columns:1fr; gap:26px; margin:42px -4px 0; padding:26px 20px; }.team-copy h2 { font-size:1.75rem; }.team-shots { gap:12px; }.account { grid-template-columns:1fr; gap:26px; margin:42px -4px 0; padding:28px 20px; }.account-panel { padding:18px; }.account-intro h2 { font-size:2.375rem; } footer { margin-top:48px; line-height:1.8; } }

@media (prefers-color-scheme:light) {
:root { --ink:#1b1a17; --muted:#55534d; --green:#006d45; --sun:#815e00; --deep:#f1efea; --card:#ffffff; --surface:#ffffff; --raised:#edeae3; --mint:#006d45; --coral:#9b4e00; }
.hero { background:#edeae3; }
.hero::after { background:linear-gradient(90deg,rgba(241,239,234,0.98) 0%,rgba(241,239,234,0.92) 18%,rgba(241,239,234,0.5) 34%,transparent 58%); pointer-events:none; }
.hero-copy { border:1px solid rgba(27,26,23,0.12); background:rgba(255,255,255,0.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 20px 44px rgba(27,26,23,0.12); }
.download { color:#ffffff; box-shadow:0 16px 50px #1b1a171f; }
.download:hover { box-shadow:0 20px 56px #1b1a1729; }
.download-icon { background:#ffffff2e; }
.language-picker { border-color:#1b1a1726; background:#ffffff; }
.language-picker button[aria-pressed="true"] { color:#ffffff; background:var(--green); }
.account { border-color:#1b1a1726; background:var(--surface); }
.account-panel { background:var(--raised); }
.account-panel input { border-color:#1b1a173d; background:#ffffff; }
.account-panel button { color:#ffffff; }
#account-status[data-error="true"] { color:var(--coral); }
.field-error { color:var(--coral); }
.account-panel input[aria-invalid="true"] { border-color:var(--coral); }
article { border-color:#1b1a1714; background:var(--card); box-shadow:0 18px 42px #1b1a170f; }
.courses-promo { border-color:#1b1a1726; background:var(--surface); }
.stat-row li { background:var(--raised); }
.game-list li { border-color:#1b1a1714; background:var(--card); box-shadow:0 18px 42px #1b1a170f; }
.team-match { border-color:#1b1a1726; background:var(--surface); }
.team-shots img { border-color:#1b1a1714; box-shadow:0 22px 48px #1b1a1718; }
.text-link:hover { color:#ffffff; }
.orb-one { background:#e3ded2; } .orb-two { background:#edeae3; }
}
@media (prefers-color-scheme:light) and (max-width:650px) {
.hero::after { background:linear-gradient(180deg,transparent 0%,transparent 35%,rgba(241,239,234,0.45) 55%,rgba(241,239,234,0.92) 100%); }
.hero-copy { background:rgba(255,255,255,0.9); }
}

@media (prefers-reduced-motion:reduce) {
.download { transition:none; }
.download:hover { transform:none; }
}


/* The round itself, in the first viewport. The homepage used to describe the
   product; this shows it, using the same scorecard component the app and the
   clubhouse render, so the demo cannot drift from the real thing. */
.hero-round { position:relative; z-index:1; padding:22px; border:1px solid rgba(197,255,213,0.22); border-radius:26px; background:#062b1d; box-shadow:0 24px 52px rgba(2,17,8,0.5); }
.hero-round__head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.hero-round__demo { padding:4px 10px; border-radius:999px; background:var(--sun); color:#3a2b00; font-size:0.625rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hero-round__course { color:#b9d0c0; font-size:0.75rem; font-weight:700; }
/* The panel is evergreen in both appearances -- it sits over a photograph, not
   over the page -- so the card inside it is pinned to the dark token values
   rather than inheriting the light scheme and rendering white-on-dark. */
.hero-round .scorecard__scroll { border-radius:12px; }
.hero-round .scorecard { --surface:#17553b; --raised:#12432f; --ink:#f2fbf3; --muted:#b9d0c0; --mint:#7ce5aa; --coral:#ff9c55; }
/* The hole numbers and pars are the reference the score is read against, so
   they take full ink here rather than the muted tone used in a dense card. */
.hero-round .scorecard thead th, .hero-round .scorecard .scorecard__total { color:#f2fbf3; }
.hero-round .scorecard td { color:#eaf8ef; }
.hero-round__group { margin-top:16px; }
.hero-round__grouptitle { margin:0 0 8px; color:#b9d0c0; font-size:0.6875rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.hero-round__players { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.hero-round__players li { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; padding:9px 12px; border-radius:12px; background:#12432f; }
.hero-round__players li.is-you { background:#17553b; box-shadow:inset 0 0 0 1px rgba(124,229,170,0.45); }
.hero-round__name { color:#f2fbf3; font-size:0.875rem; font-weight:700; }
.hero-round__thru { color:#b9d0c0; font-size:0.75rem; }
.hero-round__total { min-width:30px; color:#f2fbf3; font-size:0.9375rem; font-weight:800; text-align:right; font-variant-numeric:tabular-nums; }
.hero-round__reactions { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.hero-round__reaction { padding:6px 11px; border-radius:999px; background:#12432f; color:#b9d0c0; font-size:0.75rem; font-weight:700; }