/* golfscoutapp.com: the shared look ("Floodlit") for every page. Pages add their own inline CSS on top.
   The build adds a version to this file's URL, so it can be cached for good. */

@font-face { font-family: "Inter Tight"; src: url(/fonts/inter-tight.woff2) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; src: url(/fonts/inter-tight-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --bg: #040705;
  --bg-2: #08100b;
  --surface: #0a120d;
  --surface-2: #0f1913;
  --ink: #f2f6f3;
  --ink-2: #9ba79f;
  --ink-3: #6c7870;
  --line: rgb(255 255 255 / 8%);
  --line-2: rgb(255 255 255 / 14%);
  --green: #3ddc84;
  --lime: #c8f169;
  --link: #8be6b0;
  --glow: rgb(61 220 132 / 22%);
  --radius: 28px;
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Names the page-specific CSS uses */
  --paper: var(--bg); --card: var(--surface); --muted: var(--ink-2); --turf: var(--green); --turf-bright: var(--green);
  --shadow: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 30px 60px -30px rgb(0 0 0 / 80%);

  /* Course maps */
  --map-rough: #08120c; --map-trees: #0f2418; --map-fairway: #1b4a2c; --map-tee: #2b6b44; --map-green: #3ddc84;
  --map-sand: #d6c69a; --map-water: #2a7bb0; --map-line: rgb(242 246 243 / 80%); --map-label: #04110a; --map-pin: #c8f169;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 17px/1.6 var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
  background: radial-gradient(1100px 560px at 50% -260px, rgb(61 220 132 / 13%), transparent 70%) no-repeat, var(--bg); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #fff; }
h1, h2, h3 { line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; font-weight: 700; margin: 0; }
p { margin: 0 0 14px; text-wrap: pretty; }
::selection { background: var(--lime); color: #0b1406; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 8px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; color: #000; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.num { font-variant-numeric: tabular-nums; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgb(4 7 5 / 72%); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 650; font-size: 17px; letter-spacing: -.015em; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand img { width: 30px; height: 30px; border-radius: 22.5%; box-shadow: 0 0 0 1px var(--line-2); }
.site-nav { display: flex; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / 4%); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; white-space: nowrap; }
.site-nav a { padding: 7px 15px; border-radius: 999px; color: var(--ink-2); text-decoration: none; transition: color .15s, background .15s; }
.site-nav a:hover { color: var(--ink); background: rgb(255 255 255 / 5%); }
.site-nav a[aria-current] { color: var(--ink); background: rgb(255 255 255 / 9%); }
.header-cta { display: inline-flex; align-items: center; height: 38px; padding: 0 17px; border-radius: 999px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 650; font-size: 14px; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s; }
.header-cta:hover { color: var(--bg); transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgb(200 241 105 / 45%); }
@media (max-width: 860px) { .site-nav { display: none; } .header-cta { margin-left: auto; } }

/* Buttons and badges */
.badge { display: inline-block; line-height: 0; border-radius: 12px; transition: transform .2s var(--ease), box-shadow .2s; }
.badge:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgb(61 220 132 / 45%); }
.badge img { height: 52px; width: auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 12px; font-weight: 600; font-size: 15.5px; text-decoration: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s, box-shadow .2s; }
.btn:hover { color: var(--ink); background: rgb(255 255 255 / 5%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 26%); }
.btn::after { content: "→"; transition: transform .2s var(--ease); }
.btn:hover::after { transform: translateX(3px); }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgb(255 255 255 / 4%); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
a.pill:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.pill b { padding: 3px 9px; border-radius: 999px; background: var(--lime); color: #0b1406; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.pro { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--lime); background: rgb(200 241 105 / 12%); box-shadow: inset 0 0 0 1px rgb(200 241 105 / 22%); vertical-align: 2px; }

/* Display type: white fading down, the Floodlit headline */
.display { background: linear-gradient(180deg, #fff 35%, rgb(255 255 255 / 58%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dim { color: var(--ink-3); }

/* Surfaces */
.card { position: relative; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }

/* Device frames around the app's own screenshots */
.phone { --w: 300px; position: relative; width: var(--w); padding: calc(var(--w) * .033); border-radius: calc(var(--w) * .17); background: linear-gradient(145deg, #3d413f, #0b0c0c 38%, #1e2120); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 50px 100px -40px rgb(61 220 132 / 30%), 0 40px 70px -30px #000; flex: none; }
.phone img { width: 100%; border-radius: calc(var(--w) * .138); background: #0b2a1b; }
.watch { --w: 160px; position: relative; width: var(--w); padding: calc(var(--w) * .085); border-radius: calc(var(--w) * .27); background: linear-gradient(150deg, #6f716d, #2b2c2a 40%, #121312 70%, #4b4d4a); box-shadow: inset 0 0 0 calc(var(--w) * .03) #050605, 0 40px 70px -30px #000, 0 30px 80px -40px rgb(61 220 132 / 35%); flex: none; }
.watch img { width: 100%; border-radius: calc(var(--w) * .18); background: #000; }
.watch::before { content: ""; position: absolute; right: calc(var(--w) * -.045); top: 30%; width: calc(var(--w) * .07); height: 18%; border-radius: 4px; background: linear-gradient(90deg, #3a3c39, #7a7c77); }
.watch::after { content: ""; position: absolute; right: calc(var(--w) * -.03); top: 58%; width: calc(var(--w) * .05); height: 14%; border-radius: 3px; background: #e2621c; }

/* Content pages: course maps, tools, support, privacy */
main.page { flex: 1 0 auto; width: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(36px, 6vw, 72px) var(--gutter) 96px; }
main.page h1 { font-size: clamp(38px, 6vw, 68px); margin: 14px 0 18px; background: linear-gradient(180deg, #fff 40%, rgb(255 255 255 / 62%)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
main.page h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 72px 0 20px; }
main.page h3 { font-size: 19px; letter-spacing: -.02em; }
.crumbs { font-size: 14px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.lead { font-size: clamp(18px, 1.9vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 44em; }
.prose { max-width: 46em; }
.prose h2 { margin-top: 56px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--green); }
.note { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-3); }
.note a { color: var(--ink-2); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; margin: 34px 0; padding: 0; list-style: none; border-radius: 22px; overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
.stats li { background: var(--bg-2); padding: 18px 20px 16px; }
.stats b { display: block; font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stats li:first-child b { color: var(--lime); }
.stats span { font-size: 13.5px; color: var(--ink-2); }

.list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.list a { display: block; height: 100%; padding: 16px 20px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); transition: background .2s, box-shadow .2s, transform .2s var(--ease); }
.list a:hover { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px rgb(61 220 132 / 35%), 0 16px 40px -20px rgb(61 220 132 / 30%); transform: translateY(-2px); }
.list b { display: block; font-weight: 600; letter-spacing: -.01em; }
.list span { font-size: 14px; color: var(--ink-2); }
.list.big { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; margin-top: 40px; }
.list.big a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; padding: 28px; border-radius: var(--radius);
  background: radial-gradient(360px 200px at 100% 0%, rgb(61 220 132 / 12%), transparent 70%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
.list.big a::after { content: "→"; position: absolute; top: 24px; right: 26px; font-size: 20px; color: var(--ink-3); transition: transform .2s var(--ease), color .2s; }
.list.big a:hover::after { color: var(--lime); transform: translateX(4px); }
.list.big b { padding-right: 28px; font-size: clamp(22px, 2.4vw, 27px); letter-spacing: -.03em; line-height: 1.15; margin-bottom: 8px; }
.list.big span { font-size: 15.5px; }

/* Call to action band */
.cta { position: relative; overflow: hidden; margin: 56px 0 8px; padding: clamp(28px, 4vw, 44px); border-radius: var(--radius); display: grid; grid-template-columns: 1fr auto; gap: 20px 40px; align-items: center;
  background: radial-gradient(520px 300px at 88% 0%, rgb(61 220 132 / 22%), transparent 70%), radial-gradient(400px 200px at 0% 100%, rgb(200 241 105 / 8%), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cta h2, main.page .cta h2 { margin: 0 0 8px; font-size: clamp(24px, 2.8vw, 32px); }
.cta p { margin: 0; color: var(--ink-2); max-width: 36em; }
@media (max-width: 680px) { .cta { grid-template-columns: 1fr; } }

/* Course maps */
.map { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--map-rough); box-shadow: inset 0 0 0 1px var(--line), 0 60px 120px -60px rgb(61 220 132 / 28%); }
.map svg { display: block; width: 100%; height: auto; max-height: 80vh; }
figcaption { font-size: 14px; color: var(--ink-3); margin-top: 12px; }
.rough { fill: var(--map-rough); } .trees { fill: var(--map-trees); } .fairway { fill: var(--map-fairway); } .tee { fill: var(--map-tee); }
.green { fill: var(--map-green); } .sand { fill: var(--map-sand); } .water { fill: var(--map-water); }
.hole-line { fill: none; stroke: var(--map-line); stroke-width: 1.6; stroke-dasharray: 5 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pin circle { fill: var(--map-pin); } .pin text { fill: var(--map-label); font: 700 13px var(--font); text-anchor: middle; dominant-baseline: central; }
.holes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.hole { display: grid; grid-template-columns: 112px 1fr; gap: 18px; padding: 14px; border-radius: 22px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: inset 0 0 0 1px var(--line); }
.hole svg { width: 112px; height: 220px; border-radius: 14px; background: var(--map-rough); box-shadow: inset 0 0 0 1px var(--line); }
.hole h3 { margin-top: 4px; }
.hole .meta { font-size: 14.5px; color: var(--ink-2); margin: 4px 0 10px; }
.hole ul { list-style: none; margin: 0; padding: 0; font-size: 14px; display: grid; gap: 4px; color: var(--ink-2); }
.hole li b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.dot.sand { background: var(--map-sand); } .dot.water { background: var(--map-water); } .dot.green { background: var(--map-green); box-shadow: 0 0 8px var(--map-green); }

/* Footer */
.site-footer { margin-top: auto; border-top: 1px solid var(--line); background: var(--bg); color: var(--ink-3); font-size: 14px; padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); }
.site-footer .cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.site-footer .tag { margin-top: 14px; max-width: 22em; color: var(--ink-2); }
.site-footer h2 { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 6px 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer .legal { margin: 48px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; }
.site-footer .legal a { color: inherit; text-decoration: underline; }
@media (max-width: 760px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } .site-footer .about { grid-column: 1 / -1; } }

/* Things rise into view as you scroll, in browsers that can do it without script */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes reveal { from { opacity: 0; transform: translateY(40px) scale(.98); } }
  }
  .rise { animation: rise .9s var(--ease) both; }
  .rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .24s; } .rise.d4 { animation-delay: .36s; }
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } }
}