/* ============================================================
   SUGAR GOLF — premium rebuild by Cave Nexus
   Dark, minimal, tour-grade. Brand: script "Sugar" + GOLF.
   ============================================================ */

:root {
  --ink: #0b0d0c;
  --coal: #12140f;
  --card: #171a16;
  --card-2: #1d211c;
  --line: rgba(246, 243, 236, 0.08);
  --sugar: #f6f3ec;
  --muted: #a3aaa1;
  --green: #2fbf71;
  --green-soft: rgba(47, 191, 113, 0.12);
  --green-deep: #146c43;
  --kraft: #c9a06c;
  --radius: 18px;
  /* Official Sugar Golf brand faces, taken from "Sugar Golf All Logos.pdf":
     the logo is set in Sacramento (script) + Nunito Bold (GOLF wordmark). */
  --font-display: 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-script: 'Sacramento', cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--sugar);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); }
h3 { font-size: 1.25rem; }
p { color: var(--muted); }
strong { color: var(--sugar); }
em { font-style: normal; color: var(--green); }

.wrap { width: min(1180px, 92vw); margin: 0 auto; }
section { padding: clamp(4rem, 9vw, 7.5rem) 0; position: relative; }
.section-alt { background: var(--coal); }

.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--green);
  margin-bottom: 1.1rem;
}
.kicker::before { content: ''; width: 26px; height: 2px; background: var(--green); }
.script-accent { font-family: var(--font-script); font-weight: 400; color: var(--kraft); letter-spacing: 0; }
.lead { font-size: 1.15rem; max-width: 46ch; }

/* ---------- Focus: visible keyboard indicator on everything interactive ---------- */
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .region:focus-visible, .calc-ball:focus-visible,
.video-card:focus-visible, .finder-opts button:focus-visible,
.nav-links a:focus-visible, .socials a:focus-visible { outline-offset: 4px; }
.faq summary:focus-visible { outline-offset: -2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  padding: .95rem 1.9rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--sugar); color: var(--ink); }
.btn-solid:hover { box-shadow: 0 14px 34px rgba(246, 243, 236, .18); }
.btn-green { background: var(--green); color: #06130c; }
.btn-green:hover { box-shadow: 0 14px 34px rgba(47, 191, 113, .3); }
.btn-ghost { border-color: var(--line); color: var(--sugar); background: rgba(246,243,236,.03); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-sm { padding: .6rem 1.2rem; font-size: .85rem; }

/* ============================================================
   LOADER — golf ball tee-off, plays on every load
   (Demo mode: no session gate. To play once per visit, wrap
   in a sessionStorage check inside main.js)
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--sugar);
  display: flex; align-items: center; justify-content: center;
  animation: loaderCurtain .65s cubic-bezier(.75, 0, .25, 1) 2.35s forwards;
}
.loader-inner { text-align: center; animation: loaderShake .3s linear .92s; }
.loader-svg { width: min(430px, 78vw); height: auto; overflow: visible; }

.l-ball { animation: ballLaunch .85s cubic-bezier(.17, .84, .32, 1) 1s forwards; }
.l-ball-squash { transform-origin: 260px 232px; animation: ballSquash .18s ease-out .96s; }
.l-club {
  transform-origin: 258px 10px;
  transform: rotate(112deg);
  opacity: 0;
  animation: clubIn .12s linear .45s forwards, clubSwing .42s cubic-bezier(.6, -0.1, .82, 1) .58s forwards;
}
.l-trail path {
  stroke: #b9b2a4; stroke-width: 5; stroke-linecap: round; opacity: 0;
  animation: trailFlash .5s ease-out 1.04s;
}
.l-tee { transform-origin: 260px 262px; animation: teeSettle .55s cubic-bezier(0.23, 1, 0.32, 1) 1s; }
.l-burst circle { opacity: 0; transform-origin: 260px 235px; animation: burstPop .45s ease-out .98s; }

.loader-wm {
  margin-top: .4rem; color: #12140f;
  opacity: 0; animation: wmUp .7s ease .15s forwards;
}
.loader-wm .script { font-family: var(--font-script); font-size: clamp(3rem, 9vw, 4.4rem); line-height: 1.08; display: block; }
.loader-wm .golf { font-family: var(--font-display); font-weight: 600; letter-spacing: .55em; font-size: .85rem; margin-left: .5em; }
.loader-tag {
  margin-top: 1rem; font-family: var(--font-display); font-size: .8rem;
  letter-spacing: .28em; text-transform: uppercase; color: #8a8478;
  opacity: 0; animation: wmUp .7s ease .45s forwards;
}

@keyframes loaderCurtain { to { transform: translateY(-101%); visibility: hidden; } }
@keyframes wmUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes clubIn { to { opacity: 1; } }
@keyframes clubSwing { to { transform: rotate(-6deg); opacity: 1; } }
@keyframes ballSquash { 35% { transform: scale(1.18, .82); } 100% { transform: scale(1, 1); } }
@keyframes ballLaunch {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(620px, -470px) rotate(540deg); opacity: .9; }
}
@keyframes trailFlash { 12% { opacity: .85; } 100% { opacity: 0; transform: translate(150px, -110px); } }
/* single damped settle after impact - no bounce/elastic overshoot */
@keyframes teeSettle { 22% { transform: rotate(-10deg); } 100% { transform: rotate(0); } }
@keyframes burstPop { 20% { opacity: 1; } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes loaderShake { 25% { transform: translate(3px, -2px); } 50% { transform: translate(-3px, 2px); } 75% { transform: translate(2px, 1px); } }

@media (prefers-reduced-motion: reduce) {
  .loader { animation: loaderCurtain .4s ease .8s forwards; }
  .l-ball, .l-club, .l-trail path, .l-tee, .l-burst circle, .loader-inner { animation: none !important; }
  .l-club { opacity: 1; transform: rotate(-6deg); }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s;
}
.nav.scrolled {
  background: rgba(11, 13, 12, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.nav-inner {
  width: min(1280px, 94vw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 0;
}
.brand { display: flex; align-items: baseline; gap: .45rem; line-height: 1.15; }
.brand-script { font-family: var(--font-script); font-size: 2.3rem; color: var(--sugar); }
.brand-golf { font-family: var(--font-display); font-weight: 600; font-size: .62rem; letter-spacing: .5em; color: var(--kraft); text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 1.7rem; }
.nav-links > a:not(.btn) {
  font-family: var(--font-display); font-size: .88rem; font-weight: 400; color: var(--muted);
  transition: color .2s; position: relative;
}
.nav-links > a:not(.btn):hover, .nav-links > a.active { color: var(--sugar); }
.nav-links > a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--green); border-radius: 2px;
}
.chip-new {
  font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: var(--green); color: #06130c; border-radius: 99px; padding: .15em .55em;
  vertical-align: middle; margin-left: .3em;
}
/* eight links + CTA: tighten just above the burger breakpoint so nothing wraps */
@media (min-width: 1101px) and (max-width: 1260px) {
  .nav-links { gap: .95rem; }
  .nav-links > a:not(.btn) { font-size: .8rem; }
}
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; }
.nav-burger span { display: block; width: 24px; height: 2px; background: var(--sugar); margin: 5px 0; transition: .3s; }

/* burger raised 960 -> 1100 when the nav grew to eight items */
@media (max-width: 1100px) {
  .nav-burger { display: block; }
  .nav-links {
    position: fixed; inset: 0; z-index: 999;
    background: #0b0d0c; /* solid — translucent bg bled page content through on iOS Safari */
    flex-direction: column; justify-content: center; gap: clamp(1.1rem, 4vh, 2rem);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s, visibility 0s .3s;
  }
  .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s, visibility 0s; }
  .nav-links > a:not(.btn) { font-size: 1.35rem; }
  .nav-burger { position: relative; z-index: 1000; }
  body.menu-open { overflow: hidden; }
  .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { min-height: 100svh; display: flex; align-items: center; padding: 7rem 0 4rem; overflow: hidden; }
.hero-video, .hero-img-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(11,13,12,.88) 0%, rgba(11,13,12,.45) 55%, rgba(11,13,12,.2) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 30%);
}
.hero-content { width: min(1180px, 92vw); margin: 0 auto; max-width: 100%; }
.hero-script { font-family: var(--font-script); font-size: clamp(1.9rem, 4vw, 3rem); color: var(--kraft); margin-bottom: .4rem; }
.hero h1 { max-width: 13ch; text-wrap: balance; }
.hero-sub { margin: 1.4rem 0 2.2rem; font-size: 1.12rem; max-width: 50ch; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: 2.4rem; flex-wrap: wrap; margin-top: 3.2rem;
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.hero-stats b { color: var(--green); font-weight: 700; margin-right: .35em; }
.scroll-cue {
  position: absolute; bottom: 2rem; left: 50%; width: 24px; height: 38px;
  border: 2px solid var(--line); border-radius: 14px; transform: translateX(-50%);
}
.scroll-cue::after {
  content: ''; position: absolute; top: 7px; left: 50%; width: 4px; height: 8px;
  background: var(--green); border-radius: 4px; transform: translateX(-50%);
  animation: cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop { 50% { transform: translate(-50%, 10px); opacity: .3; } }

/* Page hero (subpages) */
.page-hero { padding: 10rem 0 4.5rem; position: relative; overflow: hidden; }
.page-hero .hero-veil { z-index: 0; }
.page-hero .wrap { position: relative; z-index: 1; }
/* decorative hero backdrop lives in CSS, not the DOM (no alt-less <img>) */
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-bg, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: .35;
}

/* ============================================================
   COMPONENTS
   ============================================================ */
.grid { display: grid; gap: 1.4rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.9rem; transition: transform .3s ease, border-color .3s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(47, 191, 113, .35); }
.card h3 { margin-bottom: .55rem; }
.card .icon { margin-bottom: 1rem; display: block; color: var(--green); }
.card .icon svg { width: 30px; height: 30px; display: block; }

/* Product cards */
.product-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s;
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,.45); border-color: rgba(47,191,113,.4); }
/* Official ball shots are transparent cutouts, so the media well provides the
   ground: a soft glow under the ball instead of a photographic backdrop. */
.product-media {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--card-2);
}
/* official shoot photography fills the square edge to edge */
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.product-card:hover .product-media img { transform: scale(1.06); }
.product-tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  background: rgba(11,13,12,.72); backdrop-filter: blur(6px);
  color: var(--green); border: 1px solid rgba(47,191,113,.4);
  padding: .4em .9em; border-radius: 99px;
}
.product-body { padding: 1.6rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.product-body h3 { font-size: 1.5rem; }
.product-body h3 .script-accent { font-size: 1.15em; margin-right: .1em; }
.spec-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.spec-chips span {
  font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  border: 1px solid var(--line); color: var(--muted);
  padding: .35em .8em; border-radius: 99px;
}
.product-body .btn { margin-top: auto; align-self: flex-start; }

/* Ticker strip */
.ticker { overflow: hidden; border-block: 1px solid var(--line); padding: 1.1rem 0; background: var(--coal); }
.ticker-track { display: flex; gap: 3.5rem; width: max-content; animation: tick 30s linear infinite; }
.ticker-track span {
  font-family: var(--font-display); font-size: .85rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.ticker-track span b { color: var(--green); }
@keyframes tick { to { transform: translateX(-50%); } }

/* Split layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split-media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); position: relative; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }

/* Compare table */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.compare { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--card); }
.compare th, .compare td { padding: 1.05rem 1.3rem; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--font-display); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.compare thead th:nth-child(2) { color: var(--green); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td { color: var(--muted); }
.compare td:nth-child(2) { color: var(--sugar); font-weight: 600; }
.compare .yes { color: var(--green); font-weight: 700; }
.compare .no { color: #e05c5c; font-weight: 700; }

/* Quiz — Ball Finder */
.finder {
  background: linear-gradient(145deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px);
  padding: clamp(1.6rem, 4vw, 3rem); max-width: 780px; margin: 0 auto;
}
.finder-progress { display: flex; gap: .45rem; margin-bottom: 1.8rem; }
.finder-progress i { height: 4px; flex: 1; border-radius: 4px; background: var(--line); transition: background .3s; }
.finder-progress i.done { background: var(--green); }
.finder-q { font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 700; margin-bottom: 1.5rem; }
.finder-opts { display: grid; gap: .8rem; }
.finder-opts button {
  text-align: left; font-family: var(--font-body); font-size: 1rem; color: var(--sugar);
  background: rgba(246,243,236,.04); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.05rem 1.3rem; cursor: pointer; transition: border-color .2s, background .2s, transform .2s;
}
.finder-opts button:hover { border-color: var(--green); background: var(--green-soft); transform: translateX(4px); }
.finder-result { text-align: center; }
/* result medallion: official shoot photo cropped to a circle */
.finder-result img { width: 190px; height: 190px; object-fit: cover; border-radius: 50%; border: 1px solid var(--line); margin: 0 auto 1.4rem; display: block; }
.finder-result .script-accent { font-size: 2.6rem; display: block; }
.finder-result h3 { font-size: 2.1rem; margin-bottom: .6rem; }
.finder-result p { max-width: 44ch; margin: 0 auto 1.4rem; }
.finder-reset { background: none; border: 0; color: var(--muted); cursor: pointer; margin-top: 1.2rem; font-size: .85rem; text-decoration: underline; }
.finder-reset:hover { color: var(--green); }

/* Savings calculator */
.calc-balls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 560px) { .calc-balls { grid-template-columns: 1fr; } }
.calc-ball {
  display: flex; align-items: center; gap: 1rem; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .9rem 1.1rem; cursor: pointer; color: var(--sugar); font-family: var(--font-body);
  transition: border-color .25s, background .25s, transform .25s;
}
.calc-ball:hover { transform: translateY(-3px); border-color: rgba(47,191,113,.5); }
.calc-ball.selected { border-color: var(--green); background: var(--green-soft); box-shadow: 0 0 0 1px var(--green); }
.calc-ball img { width: 58px; height: 58px; object-fit: contain; flex-shrink: 0; }
.calc-ball b { font-family: var(--font-display); font-size: 1.02rem; display: block; }
.calc-ball .cb-price { display: block; color: var(--green); font-weight: 600; font-size: .88rem; }
.calc-ball small { display: block; color: var(--muted); font-size: .74rem; margin-top: .1rem; }
.calc-out img.co-ball { width: 96px; height: 96px; object-fit: contain; margin: 0 auto 1.1rem; display: block; }
.pd-price { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--green); margin: .8rem 0 .2rem; }
.pd-price span { font-size: .95rem; font-weight: 400; color: var(--muted); font-family: var(--font-body); margin-left: .4rem; }
.calc { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.calc-controls label { display: block; font-family: var(--font-display); font-size: .85rem; font-weight: 600; margin: 1.4rem 0 .5rem; color: var(--sugar); }
.calc-controls label:first-child { margin-top: 0; }
.calc-controls output { color: var(--green); font-weight: 700; margin-left: .5em; }
input[type="range"] { width: 100%; accent-color: var(--green); height: 32px; }
.calc-prices { display: flex; gap: 1rem; margin-top: 1.2rem; }
.calc-prices > div { flex: 1; }
.calc-prices input, .calc-prices select {
  width: 100%; background: rgba(246,243,236,.05); border: 1px solid var(--line); border-radius: 10px;
  color: var(--sugar); font-size: 1rem; padding: .7rem .9rem; font-family: var(--font-body);
}
/* Native select arrow is unstyleable and renders light-on-light here, so draw
   our own chevron and leave room for it. */
.calc-prices select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23f6f3ec' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: .7rem;
}
.calc-prices select option { background: var(--ink, #0b1410); color: var(--sugar); }
@media (max-width: 560px) { .calc-prices { flex-direction: column; gap: .6rem; } }
.calc-note { font-size: .78rem; color: var(--muted); margin-top: 1rem; opacity: .8; }
.calc-out {
  background: linear-gradient(160deg, var(--green-deep), #0d3b26);
  border-radius: var(--radius); padding: 2.2rem; text-align: center;
  border: 1px solid rgba(47,191,113,.35);
}
.calc-out .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.4rem); color: #eafff3; line-height: 1; }
.calc-out .lbl { font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(234,255,243,.75); margin-top: .6rem; font-family: var(--font-display); }
.calc-out .sub { margin-top: 1.4rem; color: rgba(234,255,243,.85); font-size: .95rem; }

/* Reviews */
.video-card { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; background: #000; cursor: pointer; }
.video-card img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .3s, transform .5s; }
.video-card:hover img { opacity: 1; transform: scale(1.04); }
.video-card .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2;
}
.video-card .play i {
  width: 66px; height: 66px; border-radius: 50%; background: rgba(11,13,12,.7); backdrop-filter: blur(4px);
  border: 2px solid var(--sugar); display: flex; align-items: center; justify-content: center;
  transition: background .25s, border-color .25s;
}
.video-card:hover .play i { background: var(--green); border-color: var(--green); }
.video-card .play i::after { content: ''; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-title { font-family: var(--font-display); font-size: .95rem; font-weight: 600; margin-top: .8rem; }
.video-src { font-size: .8rem; color: var(--muted); }

.quote-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem; }
.quote-card blockquote { font-size: 1.05rem; color: var(--sugar); line-height: 1.6; }
.quote-card cite { display: block; margin-top: 1.1rem; font-style: normal; font-size: .85rem; color: var(--green); font-family: var(--font-display); font-weight: 600; }
.quote-card cite a { border-bottom: 1px dotted var(--green); }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; padding: 1.4rem 0; color: var(--sugar);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; color: var(--green); transition: transform .3s; flex-shrink: 0; margin-left: 1rem; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 1.4rem; max-width: 65ch; }

/* Values grid */
.value-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.value-tile b { font-family: var(--font-display); display: block; margin-bottom: .3rem; color: var(--sugar); }
.value-tile span { font-size: .9rem; color: var(--muted); }

/* Region strip */
.regions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 800px) { .regions { grid-template-columns: repeat(2, 1fr); } }
.region {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; text-align: center;
  font-family: var(--font-display); font-weight: 600; transition: border-color .25s, background .25s;
  background: var(--card);
}
.region:hover { border-color: var(--green); background: var(--green-soft); }
/* static (non-link) region chips must not imply clickability */
div.region:hover { border-color: var(--line); background: var(--card); cursor: default; }
.region .flag { font-size: 1.7rem; display: block; margin-bottom: .5rem; }
.region small { display: block; color: var(--muted); font-weight: 400; font-size: .78rem; margin-top: .25rem; }

/* Distributor cards (where-to-buy) */
.dist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: 2.2rem; }
@media (max-width: 800px) { .dist-grid { grid-template-columns: 1fr; } }
.dist {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; display: flex; flex-direction: column; gap: 1rem;
  transition: transform .3s ease, border-color .3s ease;
}
.dist:hover { transform: translateY(-4px); border-color: rgba(47, 191, 113, .35); }
.dist-role {
  font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green);
}
.dist h3 { font-size: 1.55rem; margin-top: .35rem; }
.dist-site { font-family: var(--font-display); font-size: .82rem; color: var(--muted); letter-spacing: .02em; }
.dist p { color: var(--muted); font-size: .96rem; flex: 1; }
.dist-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: .4rem; }
.dist-links { display: flex; flex-wrap: wrap; gap: 0 1.2rem; font-size: .88rem; }
/* padded so each text link is a ~44px tap target on touch screens */
.dist-links a { display: inline-block; padding: .6rem 0; color: var(--green); border-bottom: 1px dotted rgba(47,191,113,.5); }
.dist-links a:hover { border-bottom-style: solid; }
.dist-region {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.dist-region .kicker { margin-bottom: .4rem; }
/* three-region jump strip in the where-to-buy hero; stacks on phones */
.regions-3 { grid-template-columns: repeat(3, 1fr); max-width: 720px; margin-top: 2rem; }
@media (max-width: 640px) { .regions-3 { grid-template-columns: 1fr; max-width: 360px; } }

/* Forms */
.form-grid { display: grid; gap: 1rem; }
.form-grid input, .form-grid textarea, .form-grid select {
  width: 100%; background: rgba(246,243,236,.05); border: 1px solid var(--line); border-radius: 12px;
  color: var(--sugar); font-size: 1rem; padding: .95rem 1.1rem; font-family: var(--font-body);
}
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus { outline: none; border-color: var(--green); }
.form-grid input:focus-visible, .form-grid textarea:focus-visible, .form-grid select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.inline-form { display: flex; gap: .7rem; max-width: 460px; }
.inline-form input { flex: 1; background: rgba(246,243,236,.05); border: 1px solid var(--line); border-radius: 999px; color: var(--sugar); padding: .9rem 1.3rem; font-size: .95rem; }
.inline-form input:focus { outline: none; border-color: var(--green); }
.inline-form input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.form-msg { color: var(--green); font-family: var(--font-display); font-weight: 600; margin-top: .8rem; min-height: 1.4em; }

/* Brand promise band — "Sweetening up golf all around" */
.sweet-band { text-align: center; position: relative; overflow: hidden; }
.sweet-glow {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(1100px, 120vw); aspect-ratio: 2 / 1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(47,191,113,.16) 0%, rgba(47,191,113,.05) 40%, transparent 70%);
}
.sweet-band .wrap { position: relative; z-index: 1; }
.sweet-line {
  font-size: clamp(2.1rem, 6.2vw, 4.3rem); line-height: 1.02; text-wrap: balance;
  margin-top: .2rem;
}
/* Sacramento has a deep descender (the g tail) - script lines need more
   leading than a normal face or they collide with the line beneath. */
.sweet-line .script-accent {
  display: block; font-size: 1.28em; line-height: 1.06; margin-bottom: .02em;
  font-weight: 400; letter-spacing: 0;
}
.sweet-rule {
  width: 64px; height: 2px; background: var(--green); border: 0;
  margin: 2.4rem auto 0; border-radius: 2px; opacity: .8;
}
.sweet-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.6rem; text-align: left; }
@media (max-width: 800px) { .sweet-pillars { grid-template-columns: 1fr; } }
.sweet-pillar {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem; transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.sweet-pillar:hover { transform: translateY(-4px); border-color: rgba(47,191,113,.45); background: var(--card-2); }
.sweet-pillar b {
  font-family: var(--font-display); font-size: 1.06rem; display: block; margin-bottom: .5rem;
}
.sweet-pillar b i { font-style: normal; color: var(--green); }
.sweet-pillar span { color: var(--muted); font-size: .95rem; display: block; }
.sweet-pillar em { font-style: normal; color: var(--kraft); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-family: var(--font-display); display: block; margin-top: .9rem; }

/* Footer brand signature */
.foot-tag { font-family: var(--font-display); font-size: 1.02rem; color: var(--sugar); margin-top: .9rem; line-height: 1.3; }
.foot-tag .script-accent { font-size: 1.55rem; display: block; line-height: 1.2; margin-bottom: .1rem; }

/* CTA band */
.cta-band {
  background: linear-gradient(120deg, var(--green-deep) 0%, #0d3b26 60%, var(--coal) 100%);
  border-radius: calc(var(--radius) + 8px); padding: clamp(2.4rem, 6vw, 4.5rem);
  text-align: center; border: 1px solid rgba(47,191,113,.3); position: relative; overflow: hidden;
}
.cta-band h2 { margin-bottom: .8rem; }
.cta-band p { color: rgba(234,255,243,.8); max-width: 52ch; margin: 0 auto 1.8rem; }

/* Footer */
footer { background: var(--coal); border-top: 1px solid var(--line); padding: 4.5rem 0 2.2rem; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.5rem; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand .brand-script { font-size: 2.6rem; }
.foot-brand p { margin-top: .8rem; font-size: .92rem; max-width: 30ch; }
.foot-col h3 { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem; font-weight: 600; }
.foot-col a { display: block; color: var(--muted); font-size: .95rem; padding: .32rem 0; transition: color .2s; }
.foot-col a:hover { color: var(--green); }
.foot-meta {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.8rem;
  font-size: .82rem; color: var(--muted);
}
.foot-meta a { color: var(--kraft); }
.socials { display: flex; gap: .8rem; margin-top: 1.2rem; }
.socials a {
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .8rem;
  font-family: var(--font-display); font-weight: 700; color: var(--muted);
  transition: border-color .2s, color .2s, transform .2s;
}
.socials a:hover { border-color: var(--green); color: var(--green); transform: translateY(-3px); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; } .reveal-d2 { transition-delay: .2s; } .reveal-d3 { transition-delay: .3s; }

/* Breadcrumbs */
.crumbs { font-size: .82rem; color: var(--muted); margin-bottom: 1.2rem; font-family: var(--font-display); }
.crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--green); }
.crumbs span { color: var(--sugar); }

/* Product detail */
.pd-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-top: 8.5rem; }
@media (max-width: 900px) { .pd-hero { grid-template-columns: 1fr; padding-top: 7rem; } }
.pd-img {
  border-radius: calc(var(--radius) + 6px); overflow: hidden; border: 1px solid var(--line);
  background: var(--card-2);
}
.pd-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.pd-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.8rem 0; }
@media (max-width: 560px) { .pd-specs { grid-template-columns: repeat(2, 1fr); } }
.pd-spec { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; text-align: center; }
.pd-spec b { font-family: var(--font-display); font-size: 1.25rem; display: block; color: var(--green); }
.pd-spec span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ============================================================
   LEGAL PAGES (/privacy-policy/) - long-form reading measure
   ============================================================ */
.legal { max-width: 74ch; }
.legal h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 2.8rem 0 .9rem;
  padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.4rem; }
.legal h3 { font-size: 1.02rem; margin: 1.6rem 0 .5rem; color: var(--sugar); }
.legal p { margin-bottom: 1rem; }
.legal ul { margin: 0 0 1.2rem 1.1rem; }
.legal li { color: var(--muted); margin-bottom: .55rem; padding-left: .3rem; }
.legal li strong, .legal p strong { color: var(--sugar); }
.legal a { color: var(--green); border-bottom: 1px dotted rgba(47,191,113,.5); }
.legal a:hover { border-bottom-style: solid; }
.legal code {
  font-size: .88em; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 5px; padding: .1em .4em; color: var(--sugar);
}
.legal-meta {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-bottom: 2.2rem;
  font-family: var(--font-display); font-size: .84rem; color: var(--muted);
}
.legal-meta b { color: var(--green); font-weight: 600; }
.legal-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.6rem; margin: 1.4rem 0;
}
.legal-card p:last-child { margin-bottom: 0; }

/* 404 */
.oob { min-height: 100svh; display: flex; align-items: center; text-align: center; }
.oob .script-accent { font-size: 3rem; }

::selection { background: var(--green); color: #06130c; }

/* ============================================================
   TRACKMAN PERFORMANCE (/performance/)
   Two views over one dataset: individual ball, and head-to-head.
   Series colours are existing brand tokens only (kraft / green /
   sugar) so the data views add no new palette.
   ============================================================ */
.tm-soft { --tm: var(--kraft); }
.tm-pure { --tm: var(--green); }
.tm-quad { --tm: var(--sugar); }

/* Progressive enhancement: without JS both views stay visible and
   every number is readable. JS adds .tm-on and takes over. */
.tm-controls, .tm-chart, .tm-delta-col { display: none; }
.tm-on .tm-controls, .tm-on .tm-chart, .tm-on .tm-delta-col { display: revert; }
.tm-on .tm-controls { display: flex; }
.tm-on [data-view] { display: none; }
.tm-on [data-view].is-active { display: block; }
/* the no-JS tables carry the same numbers the script renders interactively */
.tm-on #tm-static { display: none; }
.tm-club-meta { font-family: var(--font-display); font-size: .82rem; color: var(--muted); }
.tm-cta { margin-top: 1.8rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* toolbar: mode switch + unit switch */
.tm-controls {
  flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 2.2rem;
}
.tm-seg {
  display: inline-flex; gap: .25rem; padding: .3rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
}
.tm-seg button {
  font-family: var(--font-display); font-weight: 600; font-size: .88rem;
  color: var(--muted); background: none; border: 0; border-radius: 999px;
  padding: .62rem 1.35rem; cursor: pointer; white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.tm-seg button:hover { color: var(--sugar); }
.tm-seg button[aria-selected="true"] { background: var(--green); color: #06130c; }
.tm-seg.tm-seg-sm button { font-size: .78rem; padding: .45rem 1rem; }
/* comfortable thumb targets once the controls stack on a phone */
@media (max-width: 640px) {
  .tm-seg button { padding: .75rem 1.15rem; }
  .tm-seg.tm-seg-sm button { padding: .62rem 1rem; }
}

/* ball chooser */
.tm-balls { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2rem; }
.tm-ball-pick {
  display: inline-flex; align-items: center; gap: .7rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: .5rem 1.3rem .5rem .5rem; cursor: pointer; color: var(--sugar);
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.tm-ball-pick img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
/* The pill thumbnail is decorative - the button's own text names the ball, so
   an <img alt=""> would only add a silent node for a crawler to flag. Same
   treatment the hero backdrops got: decorative art lives in CSS. */
.tm-pip {
  width: 34px; height: 34px; flex-shrink: 0;
  background-image: var(--pip); background-size: contain;
  background-repeat: no-repeat; background-position: center;
}
.tm-ball-pick:hover { transform: translateY(-2px); border-color: rgba(47,191,113,.5); }
.tm-ball-pick[aria-pressed="true"] { border-color: var(--tm, var(--green)); box-shadow: 0 0 0 1px var(--tm, var(--green)); }
.tm-ball-pick small { color: var(--muted); font-weight: 400; font-size: .78rem; }

/* ball header */
.tm-head { display: grid; grid-template-columns: 132px 1fr; gap: 1.6rem; align-items: center; margin-bottom: .6rem; }
@media (max-width: 560px) { .tm-head { grid-template-columns: 84px 1fr; gap: 1rem; } }
.tm-head-img {
  border-radius: 50%; overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 1 / 1; background: var(--card-2);
}
.tm-head-img img { width: 100%; height: 100%; object-fit: cover; }
.tm-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.tm-head .tm-verdict { color: var(--tm, var(--green)); font-family: var(--font-display); font-weight: 700; margin-top: .3rem; }
.tm-head p { margin-top: .5rem; max-width: 56ch; }

/* club card */
.tm-club {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 2rem); margin-top: 1.6rem;
}
.tm-club-top { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: baseline; justify-content: space-between; margin-bottom: 1.3rem; }
.tm-club-top h3 { font-size: 1.35rem; }
.tm-club-note { color: var(--muted); font-size: .93rem; max-width: 62ch; margin-bottom: 1.3rem; }
.tm-club-note b { color: var(--sugar); }

/* stat tiles */
.tm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; }
.tm-stat {
  background: var(--card-2); border: 1px solid var(--line); border-radius: 14px;
  padding: .9rem 1rem; text-align: center;
}
.tm-stat b { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: var(--sugar); line-height: 1.2; }
.tm-stat .tm-unit { font-size: .72rem; font-weight: 600; color: var(--muted); margin-left: .18em; }
.tm-stat span { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .35rem; }
.tm-stat em { display: block; font-style: normal; font-size: .68rem; color: var(--muted); opacity: .75; margin-top: .2rem; }
.tm-stat.is-lead b { color: var(--green); }

/* trajectory chart */
.tm-chart { margin: 0 0 1.4rem; }
.tm-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.tm-chart .tm-axis { stroke: var(--line); stroke-width: 1; }
.tm-chart .tm-ground { stroke: rgba(246,243,236,.22); stroke-width: 1.5; }
.tm-chart .tm-arc { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.tm-chart .tm-apex { stroke-dasharray: 3 4; stroke-width: 1; opacity: .55; }
.tm-chart text { font-family: var(--font-display); font-size: 9px; fill: var(--muted); }
.tm-chart text.tm-lab { font-size: 8.5px; font-weight: 700; }
/* On a phone the SVG scales to ~0.45 of its viewBox, which would render these
   labels at ~4px. Every figure they show (apex, carry) is repeated at full
   size in the stat tiles directly below, so drop them rather than ship text
   nobody can read. The flight shape and the legend still carry the meaning. */
@media (max-width: 700px) { .tm-chart text { display: none; } }
.tm-legend { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: .5rem; font-size: .8rem; color: var(--muted); font-family: var(--font-display); }
.tm-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.tm-legend i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.tm-scale-note { font-size: .74rem; color: var(--muted); opacity: .8; margin-top: .5rem; }

/* head-to-head */
.tm-vs-pick { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin-bottom: 1.8rem; }
@media (max-width: 640px) { .tm-vs-pick { grid-template-columns: 1fr; text-align: center; } }
.tm-vs-word { font-family: var(--font-script); font-size: 2.1rem; color: var(--kraft); line-height: 1; }
.tm-vs-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.4rem; }
.tm-vs-card {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--tm, var(--green));
  border-radius: 14px; padding: 1rem 1.2rem;
}
.tm-vs-card b { font-family: var(--font-display); font-size: 1.15rem; display: block; }
.tm-vs-card small { color: var(--muted); font-size: .8rem; }

/* caveat banner - fires when the two balls were not tested alike */
.tm-warn {
  display: flex; gap: .9rem; align-items: flex-start;
  background: rgba(201,160,108,.08); border: 1px solid rgba(201,160,108,.4);
  border-radius: 14px; padding: 1.1rem 1.3rem; margin-bottom: 1.6rem;
}
.tm-warn svg { flex-shrink: 0; width: 20px; height: 20px; stroke: var(--kraft); margin-top: .1rem; }
.tm-warn p { color: var(--sugar); font-size: .92rem; margin: 0; }
.tm-warn b { color: var(--kraft); }

/* delta column in the comparison table */
.tm-delta { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.tm-delta-0 { color: var(--muted); }

/* methodology strip */
.tm-method { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-top: 2rem; }
.tm-method div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.3rem; }
.tm-method b { font-family: var(--font-display); display: block; color: var(--sugar); margin-bottom: .25rem; font-size: .95rem; }
.tm-method span { font-size: .86rem; color: var(--muted); }

/* the compare table carries three data series here, not one winner */
.tm-table td:nth-child(2) { color: var(--muted); font-weight: 400; }
.tm-table thead th:nth-child(2) { color: var(--muted); }
.tm-table th[scope="row"] { color: var(--sugar); font-weight: 600; }
.tm-table .tm-num { font-variant-numeric: tabular-nums; }