:root {
    --ground: #EEF1E7;
    --ink: #14211A;
    --ink-soft: #45543E;
    --turf: #1F6B41;
    --turf-deep: #123C25;
    --gold: #C9962E;
    --rust: #B24632;
    --line: rgba(20, 33, 26, 0.14);
    --card: #FFFFFF;
    --card-line: rgba(20, 33, 26, 0.10);
    --nav-bg: rgba(238, 241, 231, 0.88);
    --turf-tint: #E2EEE5;
    --gold-tint: #F5E9CE;
    --shadow: 0 1px 2px rgba(20, 33, 26, 0.06), 0 8px 24px rgba(20, 33, 26, 0.06);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ground: #0F1C15;
      --ink: #F1F0E4;
      --ink-soft: #AEBBA5;
      --turf: #4FA073;
      --turf-deep: #EAF3EC;
      --gold: #E0AC4A;
      --rust: #D1725D;
      --line: rgba(241, 240, 228, 0.14);
      --card: #16241C;
      --card-line: rgba(241, 240, 228, 0.10);
      --nav-bg: rgba(15, 28, 21, 0.86);
      --turf-tint: #16261C;
      --gold-tint: #2E2313;
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
    }
  }

  :root[data-theme="dark"] {
    --ground: #0F1C15;
    --ink: #F1F0E4;
    --ink-soft: #AEBBA5;
    --turf: #4FA073;
    --turf-deep: #EAF3EC;
    --gold: #E0AC4A;
    --rust: #D1725D;
    --line: rgba(241, 240, 228, 0.14);
    --card: #16241C;
    --card-line: rgba(241, 240, 228, 0.10);
    --nav-bg: rgba(15, 28, 21, 0.86);
    --turf-tint: #16261C;
    --gold-tint: #2E2313;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  }

  :root[data-theme="light"] {
    --ground: #EEF1E7;
    --ink: #14211A;
    --ink-soft: #45543E;
    --turf: #1F6B41;
    --turf-deep: #123C25;
    --gold: #C9962E;
    --rust: #B24632;
    --line: rgba(20, 33, 26, 0.14);
    --card: #FFFFFF;
    --card-line: rgba(20, 33, 26, 0.10);
    --nav-bg: rgba(238, 241, 231, 0.88);
    --turf-tint: #E2EEE5;
    --gold-tint: #F5E9CE;
    --shadow: 0 1px 2px rgba(20, 33, 26, 0.06), 0 8px 24px rgba(20, 33, 26, 0.06);
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 1.55;
    overflow-x: hidden;
  }

  h1, h2, h3, .display {
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-weight: 400;
    text-wrap: balance;
    color: var(--ink);
  }

  .stat, .stat-num {
    font-family: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;
    font-variant-numeric: tabular-nums;
  }

  .eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--turf);
    font-weight: 700;
  }

  a { color: inherit; }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 28px;
  }

  /* ---------- Nav ---------- */
  nav.top {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  nav.top .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: Georgia, serif;
    font-size: 20px;
    color: var(--ink);
  }
  .brand img.mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    box-shadow: var(--shadow);
  }
  nav.top .links { display: flex; gap: 28px; align-items: center; font-size: 14.5px; }
  nav.top .links a { text-decoration: none; color: var(--ink-soft); }
  nav.top .links a:hover { color: var(--ink); }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold);
    color: #22170a;
    padding: 10px 18px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    box-shadow: var(--shadow);
    border: none;
    cursor: pointer;
  }

  /* ---------- Hero ---------- */
  header.hero {
    padding: 72px 0 40px;
  }
  header.hero .wrap {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
  }
  header.hero h1 {
    font-size: clamp(34px, 4.6vw, 54px);
    line-height: 1.06;
    margin: 14px 0 20px;
  }
  header.hero h1 em {
    font-style: italic;
    color: var(--turf);
  }
  header.hero p.lede {
    font-size: 18px;
    color: var(--ink-soft);
    max-width: 46ch;
    margin: 0 0 28px;
  }
  .hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
  .btn-ghost {
    padding: 10px 4px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    background: none;
    cursor: pointer;
  }

  /* ---------- Goal grid graphic ---------- */
  .goal-wrap {
    position: relative;
    aspect-ratio: 1;
    max-width: 420px;
    justify-self: center;
    width: 100%;
  }
  .goal-frame {
    position: absolute;
    inset: 6%;
    border: 5px solid var(--ink);
    opacity: 0.85;
    border-radius: 2px;
  }
  .goal-grid {
    position: absolute;
    inset: 6%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
  .goal-grid .cell {
    border: 1px solid var(--line);
  }
  .goal-grid .cell.five-hole {
    background: var(--gold-tint);
  }
  .shot-mark {
    position: absolute;
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
  }
  .shot-mark.save { color: var(--turf); }
  .shot-mark.goal { color: var(--rust); }
  .goal-caption {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: var(--ink-soft);
  }
  .goal-caption b { color: var(--turf); }
  .goal-caption i { color: var(--rust); font-style: normal; }

  /* ---------- Sections ---------- */
  section { padding: 76px 0; border-top: 1px solid var(--line); }
  section > .wrap > .eyebrow { display: block; margin-bottom: 10px; }
  section h2 {
    font-size: clamp(24px, 3vw, 32px);
    margin: 0 0 14px;
  }
  section > .wrap > p.intro {
    max-width: 58ch;
    color: var(--ink-soft);
    font-size: 16.5px;
    margin: 0 0 44px;
  }

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .feature {
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: 14px;
    padding: 26px;
    box-shadow: var(--shadow);
  }
  .feature h3 {
    font-size: 18px;
    margin: 4px 0 8px;
  }
  .feature p {
    font-size: 14.5px;
    color: var(--ink-soft);
    margin: 0;
  }
  .feature .glyph {
    width: 38px; height: 38px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--turf-tint);
    color: var(--turf);
    margin-bottom: 14px;
    font-weight: 700;
  }

  /* ---------- Split rows ---------- */
  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .split.reverse .art { order: 2; }
  .split .copy h2 { margin-top: 0; }
  .split .copy p { color: var(--ink-soft); font-size: 15.5px; }
  .taglist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .tag {
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--turf-tint);
    color: var(--turf);
    font-weight: 600;
  }

  .field-art {
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 24px;
  }

  .statline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 8px;
  }
  .statline .cell {
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    box-shadow: var(--shadow);
  }
  .statline .num {
    font-size: 26px;
    font-weight: 700;
    color: var(--turf);
  }
  .statline .label {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 4px;
  }

  /* ---------- Screenshot showcase ---------- */
  .shot-row {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .phone {
    width: 240px;
    flex-shrink: 0;
    filter: drop-shadow(0 12px 28px rgba(20, 33, 26, 0.18));
  }
  .phone img {
    display: block;
    width: 100%;
  }
  .shot-copy { flex: 1; min-width: 260px; padding-top: 12px; }
  .shot-copy p { color: var(--ink-soft); font-size: 15.5px; }

  /* ---------- Pricing ---------- */
  .tiers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .tier {
    border-radius: 16px;
    padding: 30px;
    border: 1px solid var(--card-line);
    background: var(--card);
    box-shadow: var(--shadow);
  }
  .tier.premium {
    background: var(--turf-deep);
    border-color: var(--turf);
  }
  .tier.premium, .tier.premium .price, .tier.premium li { color: var(--ground); }
  .tier .price { font-family: Georgia, serif; font-size: 34px; margin: 6px 0 18px; }
  .tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
  .tier li::before { content: "—  "; opacity: 0.6; }

  /* ---------- Coming soon ---------- */
  .teaser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background: var(--turf-deep);
    border-radius: 20px;
    padding: 40px 44px;
  }
  .teaser h2 { color: var(--ground); margin: 0 0 8px; }
  .teaser p { color: var(--ground); opacity: 0.78; margin: 0; max-width: 46ch; }
  .teaser .eyebrow { color: var(--gold); }

  footer.site {
    padding: 48px 0 64px;
    border-top: 1px solid var(--line);
  }
  footer.site .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  footer.site .links { display: flex; gap: 22px; font-size: 14px; }
  footer.site .links a { text-decoration: none; color: var(--ink-soft); }
  footer.site .links a:hover { color: var(--ink); }
  footer.site .copy { font-size: 13px; color: var(--ink-soft); }

  @media (max-width: 860px) {
    header.hero .wrap { grid-template-columns: 1fr; }
    .goal-wrap { max-width: 320px; }
    .feature-grid { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; }
    .split.reverse .art { order: 0; }
    .tiers { grid-template-columns: 1fr; }
    .teaser { flex-direction: column; align-items: flex-start; }
    nav.top .links { display: none; }
  }

/* ---------- Simple content pages (privacy, support) ---------- */
.prose {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 0 80px;
}
.prose h1 { margin-top: 0; }
.prose .meta { color: var(--ink-soft); font-size: 14px; margin-bottom: 32px; }
.prose h2 { font-size: 21px; margin: 36px 0 12px; }
.prose p { font-size: 16px; }
.card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.nav-links {
  display: flex;
  gap: 20px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.nav-links a { text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--turf); }