/*
 * GolfAI homepage and Compact Bay concept page (index.html, outdoor-range-concept.html).
 * One stylesheet on top of styles.css. The look is the App's own: Instrument Serif for display,
 * Manrope for text, forest and night surfaces, ivory and paper bands, and lime as the single accent
 * for "do this now". Dark bands run edge to edge; light content sits on a 1200px rail.
 * House rules: text 12px or larger, 4.5:1 text contrast, 44px targets, no CSS animation, motion optional.
 */

/* ---------------------------------------------------------------- base */
html{scroll-padding-top:88px}
/* A band lands flush under the 64px header, with no strip of the band above it; headings keep the 24px of air. */
main>section[id]{scroll-margin-top:-24px}
body.site{background:var(--night);color:var(--ink);font:400 17px/1.6 var(--sans)}
.site ::selection{background:var(--lime);color:var(--lime-ink)}
.wrap{width:100%;max-width:calc(1200px + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i-fill{fill:currentColor;stroke:none}
.band-night,.band-forest,.band-deep{--focus:#d8f36a;color:var(--on-dark)}
.band-night{background:var(--night)}
.band-forest{background:var(--forest-deep)}
.band-deep{background:#0d2219}
.band-ivory{background:var(--ivory)}
.band-paper{background:var(--paper)}
.band-night,.band-forest,.band-deep,.band-ivory,.band-paper{padding-block:clamp(80px,9vw,136px)}

/* ---------------------------------------------------------------- type */
.site h1,.site h2{font-family:var(--serif);font-weight:400;text-wrap:balance}
.site p,.site li,.site td{text-wrap:pretty}
.shot figcaption,.viewer-caption,.band-lead{text-wrap:balance}
.site h1{font-size:clamp(54px,7.4vw,112px);line-height:.95;letter-spacing:-.03em}
.site h2{font-size:clamp(40px,5vw,74px);line-height:1;letter-spacing:-.025em}
.site h1 em,.site h2 em{font-style:italic;color:var(--forest)}
.band-night h1 em{color:var(--lime)}
.band-night h2 em,.band-forest h2 em,.band-deep h2 em{color:var(--on-dark-eyebrow)}
.site h3{font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:20px;font-size:13px;line-height:1.4;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.band-night .kicker,.band-forest .kicker,.band-deep .kicker,.film-dialog .kicker{color:var(--on-dark-eyebrow)}
.band-head-center .kicker{justify-content:center}
.hero .kicker{flex-wrap:nowrap}
.kicker-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(216,243,106,.16)}
.ai-pill,.concept-pill{display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;border-radius:999px;font-size:12px;letter-spacing:.1em}
.ai-pill{background:var(--lime);color:var(--lime-ink)}
.concept-pill{border:1px solid rgba(242,246,233,.34);color:var(--on-dark)}
.band-head{max-width:780px;margin-bottom:clamp(40px,5vw,72px)}
.band-head-center{margin-inline:auto;text-align:center}
.band-lead{max-width:620px;margin-top:24px;font-size:19px;line-height:1.55;color:var(--muted)}
.band-head-center .band-lead{margin-inline:auto}
.band-night .band-lead,.band-forest .band-lead,.band-deep .band-lead{color:var(--on-dark-muted)}
.band-lead a,.fine a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* A link or a hyphenated word in a lead moves to the next line whole instead of splitting across two. */
.band-lead a,.keep{display:inline-block}
.fine{margin-top:20px;font-size:14px;line-height:1.6;color:var(--muted)}
.band-night .fine,.band-forest .fine,.band-deep .fine{color:var(--on-dark-muted)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px;font-size:16px;line-height:1.55}
.ticks li::before{content:"";position:absolute;left:2px;top:8px;width:14px;height:8px;border-left:2px solid var(--forest);border-bottom:2px solid var(--forest);transform:rotate(-45deg)}
.band-night .ticks li::before,.band-forest .ticks li::before{border-color:var(--mint)}

/* ---------------------------------------------------------------- buttons and links */
.site .button{gap:10px;min-height:48px;padding:12px 22px;border-radius:12px;font-size:15px;font-weight:600;letter-spacing:.005em;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.site .button:hover{transform:translateY(-1px)}
.button-lime{background:var(--lime);color:var(--lime-ink)}
.button-lime:hover{background:var(--lime-hover);box-shadow:0 12px 30px -12px rgba(216,243,106,.6)}
.site .button-forest{background:var(--forest);color:var(--paper)}
.site .button-forest:hover{background:var(--forest-hover);box-shadow:0 8px 18px -8px rgba(16,43,35,.4)}
.button-ghost{border-color:rgba(242,246,233,.3);background:rgba(242,246,233,.05);color:var(--on-dark)}
.button-ghost:hover{border-color:rgba(242,246,233,.55);background:rgba(242,246,233,.1)}
.site .button-large{min-height:56px;padding:14px 26px;font-size:16px}
.site .button-small{min-height:44px;padding:9px 18px;font-size:14px}
/* Until premium.js wires it, the demo button keeps its place (no layout shift when it appears) but cannot be seen or reached. */
[data-film-open]:disabled{visibility:hidden}
.text-button{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:8px 2px;border:0;background:none;font-size:15px;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.text-button:disabled{opacity:.45;cursor:not-allowed}
.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;color:var(--forest)}
.text-link .i{transition:transform .2s ease}
.text-link:hover .i{transform:translateX(3px)}
.band-night .text-link,.band-forest .text-link,.band-deep .text-link{color:var(--lime)}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0}
.site .site-header,.site .skip-link{--focus:#d8f36a}
.site .site-header{z-index:60;min-height:64px;padding:8px max(var(--gutter),calc((100% - 1200px)/2));gap:8px 24px;background:rgba(8,27,19,.84);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);border-bottom:1px solid rgba(233,240,220,.1);color:var(--on-dark);transition:transform .35s ease}
.site .site-header.is-tucked{transform:translateY(-100%)}
.site .brand{min-height:44px;font-size:24px;color:var(--on-dark)}
.site .brand-ai{color:var(--lime)}
.site #main-nav{display:flex;gap:2px;margin-left:auto}
.site #main-nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--on-dark-muted);transition:color .2s ease,background-color .2s ease}
.site #main-nav a:hover{color:var(--on-dark);background:rgba(242,246,233,.07)}
.site #main-nav a[aria-current]{color:var(--on-dark);background:rgba(242,246,233,.08);box-shadow:inset 0 -2px 0 var(--lime);border-radius:10px 10px 4px 4px}
.header-cta{flex:none}
.menu-toggle{display:none;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:1px solid rgba(242,246,233,.24);border-radius:12px;background:none;color:var(--on-dark);font-size:14px;font-weight:600}
.menu-toggle:disabled{visibility:hidden}
.menu-bars{display:grid;gap:4px;width:18px}
.menu-bars i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.menu-toggle[aria-expanded=true] .menu-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded=true] .menu-bars i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] .menu-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:min(calc(100svh - 64px),940px);padding-block:clamp(48px,7vw,104px) clamp(28px,4vw,48px)}
.site .hero{padding-block:clamp(40px,5vw,80px) clamp(24px,3vw,40px)}
.hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(54% 64% at 72% 42%,rgba(36,98,70,.55) 0%,rgba(16,41,31,0) 70%),radial-gradient(30% 34% at 64% 40%,rgba(216,243,106,.09) 0%,rgba(216,243,106,0) 70%)}
.hero-glow::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(233,240,220,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(233,240,220,.045) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(50% 60% at 68% 46%,#000 0%,transparent 78%);mask-image:radial-gradient(50% 60% at 68% 46%,#000 0%,transparent 78%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center}
.hero h1{max-width:9.5em;color:var(--on-dark)}
.hero h1 em{display:block}
.hero-lead{max-width:30em;margin-top:28px;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--on-dark-muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-facts{list-style:none;margin:36px 0 0;padding:22px 0 0;display:grid;gap:8px;max-width:520px;border-top:1px solid rgba(233,240,220,.12)}
.hero-facts li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:var(--on-dark-muted)}
.hero-facts li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--mint)}
.hero-stage{position:relative;height:clamp(500px,46vw,660px)}
.hero-photo{position:absolute;left:0;bottom:0;width:min(70%,420px);margin:0}
.photo-frame{position:relative;overflow:hidden;border:1px solid rgba(233,240,220,.14);border-radius:26px;box-shadow:0 50px 90px -40px rgba(0,0,0,.8)}
.photo-frame img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover}
.pose-overlay{position:absolute;inset:0;width:100%;height:100%}
.p-bones line{stroke:#e9f3df;stroke-width:6;stroke-linecap:round}
.p-bones line.p-lead{stroke:var(--lime);stroke-width:9}
.p-joints circle{fill:var(--night);stroke:#9fdec7;stroke-width:3.5}
.p-arc{fill:none;stroke:var(--lime);stroke-width:6;stroke-linecap:round}
.pose-reading{position:absolute;left:16px;top:16px;display:grid;gap:2px;padding:12px 16px;border:1px solid rgba(216,243,106,.32);border-radius:14px;background:rgba(8,27,19,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pose-reading span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-eyebrow)}
.pose-reading strong{font-size:34px;line-height:1.05;font-weight:600;letter-spacing:-.03em;color:var(--lime);font-variant-numeric:tabular-nums}
.pose-reading small{font-size:12px;color:var(--on-dark-muted)}
/* The hero phone overlaps the photo from 77% of its width at the widest; the caption stays left of it, on the same
   baseline as the phone's caption (both figures sit on the stage's bottom edge). On wider screens each caption is
   14px under its picture; on phones the photo's reading line sits between the picture and its caption. */
.hero-photo figcaption{max-width:74%;margin-top:14px;font-size:13px;line-height:1.45;color:var(--on-dark-muted);text-wrap:balance}
.hero-photo.is-drawing .p-bones line,.hero-photo.is-drawing .p-arc{stroke-dasharray:1;stroke-dashoffset:1}
.hero-photo.is-drawing .p-joints circle,.hero-photo.is-drawing .pose-reading{opacity:0}
.hero-photo.is-drawn .p-bones line,.hero-photo.is-drawn .p-arc{stroke-dashoffset:0;transition:stroke-dashoffset .55s cubic-bezier(.22,1,.36,1)}
.hero-photo.is-drawn .p-joints circle,.hero-photo.is-drawn .pose-reading{opacity:1;transition:opacity .4s ease}
.hero-photo.is-drawn .p-bones line:nth-child(n+4){transition-delay:.25s}
.hero-photo.is-drawn .p-bones line:nth-child(n+7){transition-delay:.5s}
.hero-photo.is-drawn .p-bones line:nth-child(n+9){transition-delay:.7s}
.hero-photo.is-drawn .p-bones line.p-lead{transition-delay:1s}
.hero-photo.is-drawn .p-joints circle{transition-delay:.9s}
.hero-photo.is-drawn .p-arc{transition-delay:1.5s}
.hero-photo.is-drawn .pose-reading{transition-delay:1.7s}
.hero-phone{position:absolute;right:0;bottom:0;width:clamp(200px,18vw,252px)}
.hero-phone figcaption{color:var(--on-dark-muted)}
.feature-rail{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:clamp(28px,4vw,48px)}
.feature-rail a{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;align-content:center;min-height:72px;padding:14px 16px;border:1px solid rgba(233,240,220,.12);border-radius:16px;background:rgba(233,240,220,.04);transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.feature-rail a:hover{border-color:rgba(216,243,106,.45);background:rgba(233,240,220,.08);transform:translateY(-2px)}
.feature-rail svg{grid-row:1/3;width:30px;height:30px;fill:none;stroke:var(--lime);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feature-rail strong{display:flex;align-items:center;gap:6px;font-size:16px;line-height:1.2;font-weight:600;color:var(--on-dark)}
.feature-rail strong .ai-pill{min-height:20px;padding:1px 7px;font-size:12px}
.feature-rail span:not(.ai-pill){font-size:13px;line-height:1.35;color:var(--on-dark-muted)}
.hero-source{position:relative;margin-top:clamp(20px,3vw,36px);font-size:13px;line-height:1.5;color:var(--on-dark-muted)}

/* ---------------------------------------------------------------- devices */
.shot{margin:0}
.shot figcaption{margin-top:14px;font-size:13px;line-height:1.45;color:var(--muted);text-align:center}
.band-night .shot figcaption,.band-forest .shot figcaption,.band-deep .shot figcaption{color:var(--on-dark-muted)}
.band-ivory .shot figcaption,.band-paper .shot figcaption{color:var(--ink)}
.device{position:relative;padding:8px;border-radius:42px;background:linear-gradient(155deg,#33443b 0%,#0c1611 34%,#0c1611 70%,#26352d 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 34px 64px -26px rgba(8,27,19,.55),0 10px 22px -10px rgba(8,27,19,.3)}
.band-night .device,.band-forest .device{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 50px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.4)}
.device img{width:100%;border-radius:34px;background:var(--ivory)}
.shot-phone{container-type:inline-size}
.shot-phone .device{border-radius:clamp(28px,17.8cqw,42px)}
.shot-phone .device img{border-radius:clamp(20px,14.4cqw,34px)}
.shot-desktop .device{padding:7px;border-radius:18px}
.shot-desktop .device img{border-radius:12px}
.proof-open{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0 -12px 8px;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- how it works */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
.step{display:flex;flex-direction:column;gap:26px}
.step .shot{width:min(100%,236px)}
.step-number{display:inline-flex;align-items:center;min-height:28px;margin-bottom:12px;padding:2px 12px;border-radius:999px;background:var(--gold-soft);font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--gold-ink)}
.step-text h3{margin-bottom:8px}
.step-text p{font-size:16px;line-height:1.5;color:var(--muted)}
.step-text a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.how-details{max-width:820px;margin-top:clamp(36px,5vw,56px)}
.how-details p{color:var(--muted)}
.how-details a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.need{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:auto 1fr;column-gap:clamp(32px,4vw,64px);align-items:start;margin-top:clamp(56px,7vw,96px);padding:clamp(24px,3.4vw,44px);border:1px solid var(--line);border-radius:28px;background:var(--paper);box-shadow:var(--shadow-1)}
.need-title{margin-bottom:24px}
.site .need-title{font-family:var(--serif);font-size:clamp(30px,3vw,40px);font-weight:400;letter-spacing:-.02em}
.need-list{grid-column:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px}
.need-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start}
.need-list svg{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--sage);fill:none;stroke:var(--forest);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.need-list strong{display:block;margin-bottom:4px;font-size:16px}
.need-list span{display:block;font-size:14px;line-height:1.55;color:var(--muted)}
.setup{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;padding-left:clamp(24px,3vw,48px);border-left:1px solid var(--line)}
.setup-copy{grid-column:1/-1}
.setup-copy p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--muted)}
.setup-copy .setup-note{font-size:13px}
.setup-view{margin:0}
.setup-view img{width:100%;border-radius:16px}
.setup-view figcaption{margin-top:10px;font-size:13px;font-weight:600;color:var(--muted)}

/* ---------------------------------------------------------------- swing review */
.viewer-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);grid-template-areas:"stage finding" "panel panel";gap:clamp(28px,4vw,48px) clamp(28px,5vw,80px);align-items:center}
.viewer-grid>.viewer-stage{grid-area:stage}
.viewer-grid>.finding{grid-area:finding}
.viewer-grid>.viewer-panel{grid-area:panel}
.viewer-stage{margin:0;min-width:0}
.viewer-panel{min-width:0}
.viewer-stage{position:relative;padding:clamp(16px,2vw,28px);border:1px solid rgba(233,240,220,.1);border-radius:28px;background:radial-gradient(80% 70% at 50% 30%,#163a2a 0%,#0b1f16 70%)}
.viewer-label{display:inline-flex;min-height:30px;align-items:center;margin-bottom:14px;padding:4px 12px;border:1px solid rgba(233,240,220,.18);border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-eyebrow)}
.sample-model{display:flex;justify-content:center}
#viewer-svg{width:auto;height:clamp(420px,46vw,620px);max-width:100%;aspect-ratio:500/880;overflow:hidden;border-radius:20px;background:var(--forest-deep)}
.v-guide{stroke:rgba(216,243,106,.22);stroke-width:2;stroke-dasharray:6 10}
.v-ghost line,.v-ghost circle{fill:none;stroke:rgba(255,254,248,.38);stroke-width:3;stroke-linecap:round;stroke-dasharray:8 9}
/* Over the generated golfer the address outline and the centre guide would only cross her; they stay for the drawn fallback. */
.v-photo~.v-guide,.v-photo~.v-ghost{display:none}
/* While the next picture is still loading the keypoints move on and the previous picture fades back, so the skeleton
   is never drawn at full strength over the wrong pose (main.js sets data-buffering). */
.v-photo{transition:opacity .2s ease}
#swing-viewer[data-buffering=true] .v-photo{opacity:.35}
.v-trail{fill:none;stroke:rgba(216,243,106,.7);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.v-bones line{stroke:#e9f3df;stroke-width:5;stroke-linecap:round}
.v-bones line.v-lead{stroke:var(--lime);stroke-width:8}
.v-joints circle{fill:var(--night);stroke:#9fdec7;stroke-width:3.5}
.v-focus circle{fill:rgba(216,243,106,.14);stroke:var(--lime);stroke-width:3;transform-box:fill-box;transform-origin:center}
.v-arc{fill:none;stroke:var(--lime);stroke-width:5;stroke-linecap:round}
.viewer-caption{margin-top:6px;font-size:13px;line-height:1.5;color:var(--on-dark-muted);text-align:center}
.finding-tag{font-size:15px;color:var(--on-dark-muted)}
.finding-tag strong{color:var(--on-dark)}
.finding-kind{display:inline-flex;align-items:center;min-height:26px;margin-bottom:12px;padding:2px 10px;border:1px solid rgba(216,243,106,.4);border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.sample-angle{display:grid;gap:4px;margin:6px 0 26px}
.sample-angle strong{font-size:clamp(96px,11vw,164px);line-height:.92;font-weight:600;letter-spacing:-.055em;color:var(--lime);font-variant-numeric:proportional-nums}
.sample-angle span{font-size:15px;color:var(--on-dark-muted)}
.site .finding h3{font-family:var(--serif);font-size:clamp(30px,3vw,42px);font-weight:400;line-height:1.08;letter-spacing:-.02em}
.finding-detail{margin-top:12px;font-size:18px;line-height:1.55;color:var(--on-dark-muted)}
.finding-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:28px 0 22px}
.disclosure{border-top:1px solid var(--line)}
.disclosure:last-of-type{border-bottom:1px solid var(--line)}
.band-night .disclosure,.band-forest .disclosure,.band-deep .disclosure{border-color:rgba(233,240,220,.14)}
.disclosure summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 0;font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.disclosure summary::-webkit-details-marker{display:none}
.disclosure summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s ease}
.disclosure[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.disclosure>:not(summary){margin-bottom:16px}
.disclosure p,.disclosure dd{font-size:15px;line-height:1.6}
.finding-points{margin:0;display:grid;gap:12px}
.finding-points dt{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-eyebrow)}
.finding-points dd{margin:2px 0 0;color:var(--on-dark-muted)}
.finding-foot,.keypoint-note{font-size:14px;color:var(--on-dark-muted)}
.readouts{margin:0;display:grid;gap:10px}
.readout{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:rgba(233,240,220,.05)}
.readout dt{font-size:13px;font-weight:600;color:var(--on-dark-muted)}
.readout dd{margin:0;display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:2px 12px;align-items:baseline}
.readout-value{font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.readout[data-state=out] .readout-value{color:var(--coral)}
.readout[data-state=in] .readout-value{color:var(--good)}
.readout-state{font-size:14px;font-weight:600}
.readout-help{grid-column:1/-1;font-size:13px;color:var(--on-dark-muted)}
.viewer-panel{padding:clamp(16px,2vw,24px);border:1px solid rgba(233,240,220,.1);border-radius:24px;background:rgba(233,240,220,.03)}
.viewer-now{font-size:14px;color:var(--on-dark-muted)}
.viewer-now strong{color:var(--on-dark)}
.viewer-static{display:flex;flex-wrap:wrap;gap:8px 16px;margin:12px 0 0;padding:0;list-style:none;font-size:14px;color:var(--on-dark-muted)}
.viewer-controls{display:grid;gap:16px;margin-top:14px}
.stage-buttons{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.stage-buttons button{position:relative;min-height:52px;padding:18px 4px 8px;border:0;border-radius:10px;background:none;font-size:13px;font-weight:600;line-height:1.2;color:var(--on-dark-muted);overflow-wrap:anywhere;transition:color .2s ease,background-color .2s ease}
.stage-buttons button::before{content:"";position:absolute;left:4px;right:4px;top:6px;height:3px;border-radius:3px;background:rgba(242,246,233,.18);transition:background-color .2s ease}
.stage-buttons button span{display:none}
.stage-buttons button:hover{background:rgba(242,246,233,.06);color:var(--on-dark)}
.stage-buttons button[aria-pressed=true]{color:var(--on-dark)}
.stage-buttons button[aria-pressed=true]::before{background:var(--lime)}
.stage-buttons button:disabled{opacity:.45;cursor:progress}
.viewer-scrub{display:flex;align-items:center;gap:10px}
.scrub-button{display:inline-grid;place-items:center;min-width:48px;min-height:48px;padding:0 16px;border:1px solid rgba(242,246,233,.22);border-radius:12px;background:none;font-size:15px;font-weight:600;color:var(--on-dark)}
.scrub-button:hover{background:rgba(242,246,233,.08)}
.scrub-play{min-width:92px}
.scrub-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scrub-button:disabled{opacity:.45}
.viewer-scrub input{flex:1;min-width:0;margin-left:8px;accent-color:#9fdec7;height:44px}
.viewer-time{flex:none;min-width:150px;font-size:13px;color:var(--on-dark-muted);text-align:right;font-variant-numeric:tabular-nums}
/* On a laptop the controls and then the finding share the column beside a full-size golfer, so the picture and the
   scrubber fit on one screen together. Same order as the HTML and the phone: stage, controls, finding. */
@media(min-width:1101px){
  .viewer-grid{grid-template-areas:"stage panel" "stage finding";align-items:start}
  .viewer-grid>.viewer-panel{align-self:start}
  .viewer-scrub{flex-wrap:wrap}
  .viewer-time{flex-basis:100%;min-width:0;text-align:left}
  /* Eight buttons in the narrower column: a little less gap and padding keeps "Address" whole from 1101px. */
  .stage-buttons{gap:4px}
  .stage-buttons button{padding-inline:2px}
}

/* ---------------------------------------------------------------- guided drills */
#drills-title em{display:block}
.drills-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.guide-card{overflow:hidden;border:1px solid var(--line);border-radius:28px;background:var(--paper);box-shadow:var(--shadow-2)}
.guide-photo{position:relative;margin:0}
.guide-photo img{width:100%;aspect-ratio:16/7;object-fit:cover;object-position:50% 62%}
.guide-photo figcaption{position:absolute;right:14px;bottom:12px;padding:3px 10px;border-radius:999px;background:rgba(8,27,19,.72);font-size:12px;font-weight:600;color:var(--on-dark)}
.guide-body{padding:clamp(22px,3vw,34px)}
.guide-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px}
.site .guide-head h3{font-family:var(--serif);font-size:clamp(28px,2.6vw,36px);font-weight:400;letter-spacing:-.02em}
.guide-dose{display:flex;flex-wrap:wrap;gap:6px}
.guide-dose span{padding:3px 10px;border-radius:999px;background:var(--sage);font-size:13px;font-weight:600;color:var(--forest)}
.guide-player{margin-top:22px;padding:22px;border-radius:20px;background:var(--ivory)}
.guide-position{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}
.guide-dots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:10px 0 16px}
.guide-dots span{height:4px;border-radius:4px;background:var(--line-strong);transition:background-color .25s ease}
.guide-dots span.is-current{background:var(--forest)}
.guide-instruction{min-height:3.75em;font-size:clamp(20px,1.9vw,25px);line-height:1.25;font-weight:600;letter-spacing:-.015em}
.guide-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.guide-card .disclosure{margin-top:18px}
.guide-card .disclosure p{color:var(--muted)}
.guide-card .disclosure strong{color:var(--ink)}
.guide-note{margin-top:14px;font-size:13px;color:var(--muted)}
.drills-visual{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:end}
.drills-phone-back{transform:translateY(-56px)}
.drill-facts{grid-column:1/-1;list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.drill-facts li{padding-top:16px;border-top:1px solid var(--line-strong)}
.drill-facts strong{display:block;font-family:var(--serif);font-size:44px;font-weight:400;line-height:1;letter-spacing:-.02em;color:var(--forest)}
.drill-facts span{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted)}

/* ---------------------------------------------------------------- GolfAI Coach */
.ai-coach{position:relative;overflow:hidden}
.ai-coach::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(48% 70% at 22% 50%,rgba(52,120,86,.45) 0%,rgba(16,41,31,0) 70%)}
.ai-grid{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(40px,6vw,96px);align-items:center}
.ai-visual{position:relative;display:grid;place-items:center;min-height:clamp(520px,50vw,700px)}
.voice-rings{position:absolute;inset:0;display:grid;place-items:center}
.voice-rings span{position:absolute;width:clamp(300px,34vw,480px);aspect-ratio:1;border:1px solid rgba(216,243,106,.2);border-radius:50%}
.voice-rings span:nth-child(2){width:clamp(380px,44vw,620px);border-color:rgba(216,243,106,.12)}
.voice-rings span:nth-child(3){width:clamp(460px,54vw,760px);border-color:rgba(216,243,106,.06)}
.ai-phone{position:relative;width:clamp(220px,21vw,292px)}
/* The real answer in front, the live session behind: two App screens, the same pairing as the drills band. */
.ai-phones{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:20px;align-items:end;width:min(100%,620px)}
.ai-phones .ai-phone{width:auto}
.ai-phone-back{transform:translateY(-56px)}
/* A narrow phone shows the answer alone, at a size its text can be read; the live session is in the cards below. */
@media(max-width:560px){.ai-phones{grid-template-columns:minmax(0,1fr);width:min(100%,300px)}.ai-phone-back{display:none}}
/* So does a laptop narrower than 1181px, where the two-column band would shrink the answer to unreadable text. */
@media(min-width:981px) and (max-width:1180px){.ai-phones{grid-template-columns:minmax(0,1fr);width:min(100%,300px)}.ai-phone-back{display:none}}
.ai-features{list-style:none;margin:8px 0 28px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ai-features li{position:relative;overflow:hidden;display:grid;gap:4px;padding:20px 22px 20px 26px;border:1px solid rgba(233,240,220,.12);border-radius:16px;background:rgba(233,240,220,.05)}
.ai-features li::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--lime)}
.ai-features strong{font-family:var(--serif);font-size:clamp(24px,2.2vw,30px);font-weight:400;line-height:1.1;letter-spacing:-.015em;color:var(--on-dark)}
.ai-features span{font-size:14px;line-height:1.45;color:var(--on-dark-muted)}
.ai-details .ai-list-title{margin:4px 0 14px}
.ai-list-title{margin:36px 0 18px;color:var(--on-dark)}
.ai-ticks li{color:var(--on-dark)}

/* ---------------------------------------------------------------- your coach */
#coaches-title em{display:inline-block}
.coach-proofs{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:0;align-items:end;max-width:1080px;margin-inline:auto}
/* The phone overlaps only the inbox capture's empty right margin, so Send to golfer, Dismiss and the review pill show. */
.coach-inbox{grid-column:1/3;grid-row:1;width:calc(100% - 236px)}
.coach-note{grid-column:2;grid-row:1;align-self:end;margin-bottom:-14px}
@media(min-width:761px){.coach-note{margin-bottom:0}.coach-note figcaption{margin-left:-64px;text-align:right}}
/* Where the phone caption reaches under the inbox, the inbox caption starts at the left so the two never meet. */
@media(min-width:761px) and (max-width:1100px){.coach-inbox figcaption{text-align:left}}
.coach-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:880px;margin:clamp(72px,8vw,112px) auto 0;padding:0;list-style:none;counter-reset:flow}
.coach-flow li{position:relative;display:grid;justify-items:center;align-content:start;gap:10px;padding:0 12px;font-size:17px;font-weight:600;text-align:center}
.coach-flow li span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--forest-deep);font-size:14px;color:var(--lime)}
.coach-flow li:not(:last-child)::after{content:"";position:absolute;top:22px;left:calc(50% + 34px);right:calc(-50% + 34px);height:2px;background:linear-gradient(90deg,var(--forest),rgba(25,79,59,.15))}
.coach-meta{max-width:760px;margin:clamp(40px,5vw,64px) auto 0;text-align:center}
.coach-meta>p{font-size:16px;line-height:1.65;color:var(--muted)}
.coach-meta .disclosure{margin-top:24px;text-align:left}
.coach-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 28px}
.coach-points h3{font-size:16px;margin-bottom:6px}
.coach-points p{color:var(--muted)}
.coach-meta .text-link{margin-top:20px}

/* ---------------------------------------------------------------- progress */
.progress-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.feature-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:var(--paper)}
.feature-card>.shot-phone{position:relative;height:320px;overflow:hidden;padding:32px 0 0;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--sage),var(--paper))}
.feature-card>.shot-phone .device{width:236px;margin-inline:auto}
.feature-card>.shot-phone figcaption{position:absolute;left:16px;top:10px;margin:0;font-size:12px;text-align:left}
.feature-text{padding:clamp(22px,2.6vw,32px)}
.feature-text h3{margin-bottom:14px}
.site .feature-text h3,.site .feature-note h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.2vw,32px);line-height:1.1;letter-spacing:-.02em}
.feature-text .ticks li{font-size:15px}
.feature-text .disclosure{margin-top:20px}
.standard-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px}
.standard-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.35;color:var(--ink)}
.view-badge{flex:none;display:inline-flex;align-items:center;min-height:22px;padding:1px 8px;border-radius:999px;background:var(--sage);font-size:12px;font-weight:600;color:var(--forest)}
.feature-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center}
.feature-wide>.shot{padding:clamp(20px,3vw,40px);background:linear-gradient(135deg,#e8eedf,#f6f7ef)}
.feature-note{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:6px 56px;align-items:start;padding:clamp(22px,2.6vw,32px);background:var(--forest-deep);border-color:var(--forest-deep);color:var(--on-dark)}
.feature-note>h3{grid-row:1/3}
.feature-note>p,.feature-note>.fine{grid-column:2}
.feature-note h3{margin-bottom:10px;font-size:19px;color:var(--on-dark)}
.feature-note h3:not(:first-child){margin-top:26px}
.feature-note p{font-size:15px;line-height:1.6;color:var(--on-dark-muted)}
.feature-note .fine{margin-top:10px;font-size:13px;color:var(--on-dark-muted)}
.feature-note .ticks li{font-size:14px;color:var(--on-dark-muted)}
.feature-note .ticks li::before{border-color:var(--lime)}

/* ---------------------------------------------------------------- venue concept */
.venue-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px 64px;align-items:end;max-width:none}
.mode-foundation{padding:22px 24px;border:1px solid rgba(233,240,220,.14);border-radius:20px;background:rgba(233,240,220,.04)}
.platform-badge{display:inline-block;margin-bottom:10px;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--lime)}
.mode-foundation p{font-size:15px;line-height:1.55;color:var(--on-dark-muted)}
.mode-foundation .text-link{margin-top:6px}
.venue-scene{position:relative;margin:0}
.venue-scene img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 72%}
.venue-scene::before,.venue-scene::after{content:"";position:absolute;left:0;right:0;height:22%;pointer-events:none}
.venue-scene::before{top:0;background:linear-gradient(180deg,var(--night),rgba(8,27,19,0))}
.venue-scene::after{bottom:0;background:linear-gradient(0deg,var(--night),rgba(8,27,19,0))}
.venue-hotspots{position:absolute;inset:0;z-index:2}
.venue-hotspot{position:absolute;display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid rgba(255,255,255,.85);border-radius:50%;background:rgba(8,27,19,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:15px;font-weight:600;color:var(--on-dark);transition:background-color .2s ease,transform .2s ease,color .2s ease}
.venue-hotspot:hover{transform:scale(1.08)}
.venue-hotspot[aria-pressed=true]{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);box-shadow:0 0 0 8px rgba(216,243,106,.2)}
.point-phone{left:61%;top:44%}
.point-capture{left:51%;top:12%}
.point-hub{left:34%;top:57%}
.point-history{left:84%;top:70%}
.venue-caption{position:absolute;left:max(var(--gutter),calc((100% - 1200px)/2));bottom:18px;z-index:2;padding:4px 12px;border-radius:999px;background:rgba(8,27,19,.74);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark)}
.venue-legend{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.venue-point-panel{padding:22px 0 0;border-top:2px solid rgba(233,240,220,.14);transition:border-color .25s ease,opacity .25s ease}
.venue-point-panel h3{margin:10px 0 8px;font-size:18px;color:var(--on-dark)}
.venue-point-panel p{font-size:14px;line-height:1.6;color:var(--on-dark-muted)}
.venue-num{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid rgba(242,246,233,.4);border-radius:50%;font-size:13px;font-weight:600}
[data-venue-story].is-wired .venue-point-panel.is-active{opacity:1;border-color:var(--lime)}
.venue-point-panel.is-active .venue-num{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.venue-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:36px;padding-top:22px;border-top:1px solid rgba(233,240,220,.1)}
.venue-source{max-width:760px;font-size:13px;line-height:1.6;color:var(--on-dark-muted)}

/* ---------------------------------------------------------------- comparison */
.compare-table{overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--paper)}
.compare-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.compare-table th,.compare-table td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.compare-table thead th{padding-block:20px;background:var(--ivory);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.compare-table thead th:nth-child(2){background:var(--forest-deep);color:var(--on-dark)}
.compare-table tbody th{width:19%;font-size:15px;font-weight:600}
.compare-table td{color:var(--muted)}
.compare-table td:nth-of-type(1){--focus:#d8f36a;background:var(--forest-deep);border-bottom-color:rgba(233,240,220,.12);color:var(--on-dark)}
.compare-table thead th:nth-child(2){border-bottom-color:rgba(233,240,220,.12)}
.compare-table td a{font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.compare-table tbody th:focus-visible{outline-offset:-4px}
.compare-table tr:last-child>*{border-bottom:0}
.tag{display:block;width:fit-content;margin:0 0 8px;padding:1px 10px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.7}
.tag-weak{background:var(--gold-soft);color:var(--gold-ink)}
.tag-strong{background:var(--sage);color:var(--forest)}
.compare-note{max-width:820px}
.compare-more{margin-top:14px;color:var(--forest)}
@media screen{.compare-table.is-short [data-compare-extra]{display:none}}

/* ---------------------------------------------------------------- privacy */
.privacy-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.privacy-grid .band-head{margin-bottom:0}
.site .privacy-grid h2,.site .faq-grid h2{font-size:clamp(40px,4.2vw,62px)}
.privacy-grid h2 em,.faq-grid h2 em{display:block}
.privacy .band-lead a{color:var(--on-dark)}
.privacy-list{list-style:none;margin:0;padding:0;counter-reset:privacy}
.privacy-list li{position:relative;padding:22px 0 22px 64px;border-top:1px solid rgba(233,240,220,.14);font-size:16px;line-height:1.6;color:var(--on-dark)}
.privacy-list li:last-child{border-bottom:1px solid rgba(233,240,220,.14)}
.privacy-list li::before{counter-increment:privacy;content:counter(privacy);position:absolute;left:0;top:14px;font-family:var(--serif);font-size:40px;font-style:italic;line-height:1;color:var(--lime)}
.privacy-list a{display:inline-flex;align-items:center;min-height:44px;margin-block:-11px;font-size:14px;font-weight:600;color:var(--on-dark-eyebrow);text-decoration:underline;text-underline-offset:4px}

/* ---------------------------------------------------------------- questions */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-grid .band-head{margin-bottom:0}
.question-search{margin-top:28px}
.question-search label{display:block;margin-bottom:8px;font-size:14px;font-weight:600}
.question-search-field{display:flex;gap:8px}
.question-search input{flex:1;min-width:0;min-height:48px;padding:10px 14px;border:1px solid var(--field-line);border-radius:12px;background:var(--paper);font:400 16px/1.5 var(--sans)}
.question-search button{min-height:48px;padding:0 16px;border:1px solid var(--line-strong);border-radius:12px;background:none;font-size:14px;font-weight:600}
#question-count{margin-top:10px;font-size:14px;color:var(--muted)}
.questions details{border-top:1px solid var(--line)}
.questions details:last-child{border-bottom:1px solid var(--line)}
.questions summary{position:relative;display:block;min-height:64px;padding:20px 48px 20px 0;font-size:18px;font-weight:600;line-height:1.35;cursor:pointer;list-style:none}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"";position:absolute;right:6px;top:26px;width:10px;height:10px;border-right:2px solid var(--forest);border-bottom:2px solid var(--forest);transform:rotate(45deg);transition:transform .25s ease}
.questions details[open] summary::after{transform:rotate(-135deg)}
.questions details p{padding:0 48px 24px 0;font-size:16px;line-height:1.65;color:var(--muted)}
.questions details a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* Questions and disclosures answer a pointer, and open with a short height transition when motion is allowed. */
@media(hover:hover){
  .questions summary:hover,.disclosure summary:hover{color:var(--forest)}
  .band-night .disclosure summary:hover,.band-forest .disclosure summary:hover,.band-deep .disclosure summary:hover{color:var(--lime)}
  .questions summary:hover::after{transform:rotate(45deg) translate(2px,2px)}
}
@media(prefers-reduced-motion:no-preference){
  .questions details,.disclosure{interpolate-size:allow-keywords}
  .questions details::details-content,.disclosure::details-content{block-size:0;overflow:clip;overflow-clip-margin:6px;transition:block-size .3s ease,content-visibility .3s allow-discrete}
  .questions details[open]::details-content,.disclosure[open]::details-content{block-size:auto}
}

/* ---------------------------------------------------------------- access and enquiry */
.access{position:relative;overflow:hidden;padding-bottom:clamp(40px,5vw,64px)}
.access::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 60% at 50% 0%,rgba(52,120,86,.4) 0%,rgba(16,41,31,0) 70%)}
.access .wrap{position:relative}
.access-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.access-list li{display:flex;flex-direction:column;gap:10px;padding:28px;border:1px solid rgba(233,240,220,.12);border-radius:24px;background:rgba(233,240,220,.04)}
.access-list h3{font-family:var(--serif);font-size:30px;font-weight:400;letter-spacing:-.02em}
.site .access-list h3{font-size:30px;font-weight:400}
.access-list p{flex:1;font-size:15px;line-height:1.6;color:var(--on-dark-muted)}
.access-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;color:var(--lime)}
@media(hover:hover){.access-link:hover{text-decoration:underline;text-underline-offset:4px}.privacy-list a:hover{color:var(--on-dark)}}
.site .partnership{padding-top:clamp(40px,5vw,64px)}
.partnership-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.partnership-copy h2{color:var(--on-dark)}
.partnership-points{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px}
.partnership-points li{position:relative;padding-left:24px;font-size:15px;line-height:1.55;color:var(--on-dark-muted)}
.partnership-points li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--mint)}
.partnership-form{--focus:#28735b;padding:clamp(24px,3.4vw,44px);border-radius:28px;background:var(--paper);color:var(--ink);box-shadow:0 40px 80px -36px rgba(0,0,0,.6)}
.form-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:22px}
.site .form-heading h3{font-family:var(--serif);font-size:32px;font-weight:400;letter-spacing:-.02em}
.form-heading p{font-size:13px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 18px}
.form-section-label{grid-column:1/-1;margin-top:6px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}
.form-section-label span{margin-right:6px}
.form-field{display:grid;gap:6px}
.form-field-wide{grid-column:1/-1}
.form-field label{font-size:14px;font-weight:600}
.form-field label span{font-weight:400;color:var(--muted)}
.form-field input,.form-field select,.form-field textarea{width:100%;min-height:50px;padding:11px 14px;border:1px solid var(--field-line);border-radius:12px;background:#fff;font:400 16px/1.5 var(--sans);color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
.form-field textarea{resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--forest);box-shadow:0 0 0 3px rgba(197,164,109,.35)}
.form-field [aria-invalid=true]{border-color:var(--danger)}
.field-error{font-size:14px;font-weight:600;color:var(--danger)}
.form-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.form-consent{margin-top:18px}
.form-consent label{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;font-size:14px;line-height:1.6;color:var(--muted)}
.form-consent input{width:22px;height:22px;margin-top:2px;accent-color:#194f3b}
.form-consent a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.form-submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}
.form-submit-row .button-lime{background:var(--forest-deep);color:var(--lime)}
.form-submit-row .button-lime:hover{background:var(--forest);box-shadow:0 10px 24px -12px rgba(16,43,35,.6)}
.form-submit-note{font-size:14px;color:var(--muted)}
.form-status{margin-top:14px;font-size:15px;font-weight:600}
.form-status:empty{display:none}
.form-status[data-state=error]{color:var(--danger)}
.form-status[data-state=success]{color:var(--forest)}
.form-fallback,.form-noscript{margin-top:12px;font-size:14px;color:var(--muted)}
.form-fallback a,.form-noscript a{color:var(--forest);font-weight:600;text-decoration:underline}

/* ---------------------------------------------------------------- footer */
.site .site-footer{padding:clamp(56px,7vw,96px) 0 40px;border-top:1px solid rgba(233,240,220,.08);background:var(--night);color:var(--on-dark)}
.site .footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);grid-template-rows:auto 1fr;gap:20px 48px;align-items:start;max-width:calc(1200px + 2*var(--gutter));padding-bottom:40px}
.site .footer-top .brand{justify-self:start}
.footer-tagline{grid-column:1;margin-top:4px;max-width:360px;font-size:15px;line-height:1.6;color:var(--on-dark-muted)}
.footer-links{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:repeat(2,minmax(0,180px));gap:24px}
.footer-links p{margin-bottom:8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-eyebrow)}
.footer-links a{display:flex;align-items:center;min-height:44px;font-size:15px;color:var(--on-dark)}
.footer-links a:hover{color:var(--lime)}
.site .footer-bottom{position:relative;max-width:calc(1200px + 2*var(--gutter));padding-top:22px;border-top:0}
.site .footer-bottom::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:rgba(233,240,220,.12)}
.site .footer-note{max-width:calc(1200px + 2*var(--gutter));margin-top:16px;font-size:13px;color:var(--on-dark-muted)}

/* ---------------------------------------------------------------- product demo dialog */
.film-dialog{width:min(1040px,calc(100% - 32px));max-height:calc(100% - 32px);padding:clamp(18px,2.4vw,28px);border:1px solid rgba(233,240,220,.12);border-radius:28px;background:var(--night);color:var(--on-dark);--focus:#d8f36a}
.film-dialog::backdrop{background:rgba(3,10,7,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.film-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.film-dialog .kicker{margin-bottom:6px}
.site .film-dialog h2{font-size:clamp(28px,3vw,40px)}
.film-close{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid rgba(242,246,233,.24);border-radius:50%;background:none;color:var(--on-dark)}
.film-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.film-dialog video{width:100%;height:auto;border-radius:16px;background:var(--night-panel)}
/* The dialog and its backdrop fade and rise in, and out, when motion is allowed; without support it opens at once. */
@media(prefers-reduced-motion:no-preference){
  .film-dialog{opacity:0;translate:0 14px;transition:opacity .25s ease,translate .3s cubic-bezier(.22,1,.36,1),overlay .3s allow-discrete,display .3s allow-discrete}
  .film-dialog[open]{opacity:1;translate:0}
  @starting-style{.film-dialog[open]{opacity:0;translate:0 14px}}
  .film-dialog::backdrop{opacity:0;transition:opacity .25s ease,overlay .3s allow-discrete,display .3s allow-discrete}
  .film-dialog[open]::backdrop{opacity:1}
  @starting-style{.film-dialog[open]::backdrop{opacity:0}}
}
.product-film-chapters{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.product-film-chapters button{min-height:44px;padding:8px 14px;border:1px solid rgba(242,246,233,.2);border-radius:12px;background:none;font-size:14px;font-weight:600;color:var(--on-dark-muted)}
.product-film-chapters button span{margin-right:6px;color:var(--on-dark-muted)}
.product-film-chapters button[aria-pressed=true]{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.product-film-chapters button[aria-pressed=true] span{color:var(--lime-ink)}
.product-film-context{margin-top:12px;font-size:15px;color:var(--on-dark)}
.product-film-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.film-dialog [data-film-status]:empty{display:none}
.film-dialog [data-film-status]{margin-top:10px;font-size:14px;color:var(--on-dark-muted)}
.film-source{margin-top:14px;font-size:13px;line-height:1.55;color:var(--on-dark-muted)}
.film-download{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- entrance */
.has-motion .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.has-motion .reveal.is-revealed{opacity:1;transform:none}

/* ---------------------------------------------------------------- concept page */
@media(min-width:981px){.concept-hero .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);column-gap:64px;align-items:end}.concept-hero .band-head{grid-column:1;grid-row:1}.concept-hero .concept-scene{grid-column:1/-1;grid-row:2}.concept-hero .venue-foot{grid-column:2;grid-row:1;flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 clamp(32px,4vw,56px);padding:22px 24px;border:1px solid rgba(233,240,220,.14);border-radius:20px;background:rgba(233,240,220,.04)}.concept-hero .venue-source{font-size:15px;line-height:1.55}}
.concept-hero{position:relative;overflow:hidden}
.concept-hero .band-head{margin-bottom:clamp(32px,4vw,56px)}
.concept-scene{margin:0}
.concept-scene img{width:100%;border-radius:28px}
.concept-scene figcaption{margin-top:12px;font-size:13px;color:var(--on-dark-muted)}
.concept-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.concept-points li{padding-top:18px;border-top:2px solid rgba(233,240,220,.14)}
.concept-points h3{margin-bottom:8px;color:var(--on-dark)}
.concept-points p{font-size:15px;line-height:1.6;color:var(--on-dark-muted)}

/* ---------------------------------------------------------------- responsive */
@media(max-width:1100px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}
  .step{flex-direction:row;align-items:flex-start;gap:24px}
  .step .shot{flex:none;width:44%;max-width:220px}
  .venue-legend{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
}
@media(min-width:761px) and (max-width:1100px){
  .step{flex-direction:column;gap:20px}
  .step .shot{width:min(100%,200px);max-width:none}
}
@media(min-width:981px) and (max-width:1240px){
  .hero-actions .button{flex:1 1 auto}
}
/* Five cards on six tracks: three across, then two wider ones, so no row ends in an empty cell. */
@media(min-width:761px) and (max-width:1100px){
  .feature-rail{grid-template-columns:repeat(6,minmax(0,1fr))}
  .feature-rail a{grid-column:span 2}
  .feature-rail a:nth-child(n+4){grid-column:span 3}
}
/* A smaller reading badge on narrow laptops, so it stays clear of her gloved hands. */
@media(min-width:981px) and (max-width:1365px){
  .pose-reading{left:8px;top:8px;gap:0;padding:5px 9px}
  .pose-reading strong{font-size:22px}
}
@media(max-width:980px){
  .menu-toggle{display:inline-flex;order:2;margin-left:auto}
  .header-cta{order:3;margin-left:0}
  .site #main-nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;gap:0;margin:0;padding:8px var(--gutter) 18px;background:var(--night);border-bottom:1px solid rgba(233,240,220,.12);box-shadow:0 24px 40px -20px rgba(0,0,0,.6)}
  html:has(#main-nav.is-open){overflow:hidden}
  .site #main-nav.is-open{box-shadow:0 24px 40px -20px rgba(0,0,0,.6),0 100vh 0 100vh rgba(3,10,7,.55)}
  .site #main-nav.is-open{display:flex}
  @media(prefers-reduced-motion:no-preference){
    .site #main-nav{opacity:0;translate:0 -8px;transition:opacity .2s ease,translate .25s cubic-bezier(.22,1,.36,1),display .25s allow-discrete}
    .site #main-nav.is-open{opacity:1;translate:0}
    @starting-style{.site #main-nav.is-open{opacity:0;translate:0 -8px}}
  }
  .site #main-nav a{min-height:52px;display:flex;align-items:center;padding:12px 4px;border-radius:0;border-bottom:1px solid rgba(233,240,220,.08);font-size:17px}
  .site #main-nav a[aria-current]{box-shadow:none;background:none;color:var(--lime)}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero{min-height:0}
  .hero-stage{height:clamp(440px,92vw,600px);max-width:560px;width:100%;margin-inline:auto}
  .drills-grid,.ai-grid,.privacy-grid,.faq-grid,.partnership-grid{grid-template-columns:minmax(0,1fr)}
  .ai-visual{order:2;min-height:0;padding-block:24px}
  .ai-phones{margin-inline:auto}
  .ai-phone-back{transform:translateY(-28px)}
  .ai-coach .ai-grid{row-gap:0}
  .ai-copy{display:contents}
  .ai-copy>.band-head{order:1}
  .ai-coach .ai-visual{padding-block:8px 32px}
  /* Heading, then the App screen, then the four cards, then the disclosure. */
  .ai-features{order:3;margin-top:8px}
  .ai-details{order:4}
  .drills-phone-back{transform:translateY(-28px)}
  .drills-visual{max-width:560px;margin-inline:auto;width:100%}
  .progress-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .need{grid-template-columns:minmax(0,1fr)}
  .setup{grid-column:1;grid-row:auto;margin-top:28px;padding:28px 0 0;border-left:0;border-top:1px solid var(--line)}
  .feature-wide{grid-template-columns:minmax(0,1fr)}
  .feature-note{grid-column:1/-1}
  .venue-head{grid-template-columns:minmax(0,1fr)}
  .access-list{grid-template-columns:minmax(0,1fr)}
  .concept-points{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .band-night,.band-forest,.band-deep,.band-ivory,.band-paper{padding-block:clamp(64px,16vw,84px)}
  .band-lead{font-size:17px}
  .site h3{font-size:18px}
  .hero-actions .button{flex:1 1 auto}
  /* The product comes into the first screen: headline and lead, the primary button, then the golfer and the App,
     then the demo button and the facts. Only the visual order changes (the stage holds nothing focusable), so Tab
     still meets the copy and the two buttons in the order they are seen. */
  .hero-copy{display:contents}
  .hero-grid{row-gap:0}
  .hero .kicker{order:0}
  .hero h1{order:1}
  .hero-lead{order:2;margin-top:16px}
  .hero .hero-actions{display:contents}
  .hero .hero-actions .button-lime{order:3;margin-top:20px}
  .hero-stage{order:4;margin-top:24px}
  .hero .hero-actions .film-launch{order:5;margin-top:24px}
  .hero .hero-facts{order:6;margin-top:24px}
  /* The rail as a compact two-column index: Swing review and Guided drills, GolfAI Coach across, then Your coach
     and Progress. The one-line descriptions go; the labels say enough at this size. */
  .feature-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .feature-rail span:not(.ai-pill){display:none}
  .feature-rail a{grid-template-columns:24px minmax(0,1fr);column-gap:10px;min-height:56px;padding:10px 12px}
  .feature-rail svg{width:24px;height:24px}
  .feature-rail a:nth-child(3){grid-column:1/-1}
  .ai-features{grid-template-columns:minmax(0,1fr)}
  /* The photo stays in the flow and sets the stage's height, so it sits 24px under the button at every width
     instead of rising over the copy or leaving a gap; the phone, always shorter, keeps to the stage's corner. */
  .hero-stage{height:auto}
  .hero-phone{width:40%}
  .hero-photo{position:relative;width:66%}
  .hero-photo figcaption{max-width:88%}
  /* On phones the reading leaves the picture for its own line under it, above the caption, so her head, her hands,
     the club and the lime lead arm it reads all stay in view. Like the caption, it stays left of the phone. */
  .pose-reading{position:static;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;max-width:88%;margin-top:10px;padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .pose-reading strong{font-size:22px}
  .step{flex-direction:column}
  .steps{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .step{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:start}
  .step .shot{width:100%}
  .step .shot figcaption{font-size:12px}
  .need-list{grid-template-columns:minmax(0,1fr)}
  .setup{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .setup-copy{grid-column:1/-1}
  .viewer-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "panel" "finding";row-gap:12px}
  .viewer-grid>.finding{margin-top:clamp(20px,5vw,36px)}
  #viewer-svg{height:clamp(300px,80vw,380px)}
  .stage-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}
  .viewer-time{flex-basis:100%;min-width:0;text-align:left}
  .viewer-scrub{flex-wrap:wrap}
  .drills-visual{grid-template-columns:minmax(0,.86fr) minmax(0,1fr)}
  .drill-facts{grid-template-columns:minmax(0,1fr);gap:16px}
  .coach-proofs{grid-template-columns:minmax(0,54fr) minmax(0,46fr)}
  .coach-inbox{width:100%;grid-column:1/3}
  .coach-note{grid-row:2;grid-column:2;margin:-80px 0 0}
  .coach-inbox figcaption{text-align:left;padding-right:48%}
  .coach-note figcaption{text-align:left}
  .proof-open{display:flex;width:fit-content;margin:2px 0 0}
  .coach-flow li{font-size:15px;padding:0 6px}
  .coach-flow li:not(:last-child)::after{left:calc(50% + 28px);right:calc(-50% + 28px)}
  .coach-points{grid-template-columns:minmax(0,1fr)}
  .progress-grid{grid-template-columns:minmax(0,1fr)}
  .feature-card>.shot-phone{height:280px;padding-top:28px}
  .feature-card>.shot-phone .device{width:200px}
  .venue-legend{grid-template-columns:minmax(0,1fr)}
  [data-venue-story].is-wired .venue-point-panel:not(.is-active){display:none}
  [data-venue-story].is-wired .venue-legend{margin-top:16px}
  .point-history{top:62%}
  /* The caption leaves the picture for its own line under it; the pins and the fades stay sized to the picture. */
  .venue-caption{position:relative;left:auto;bottom:auto;display:block;max-width:none;margin:12px var(--gutter) 0;padding:0;border-radius:0;background:none;letter-spacing:.06em;color:var(--on-dark-muted)}
  .venue-hotspots{bottom:auto;height:clamp(320px,90vw,460px)}
  .venue-scene::before{height:calc(clamp(320px,90vw,460px)*.22)}
  .venue-scene::after{bottom:auto;top:calc(clamp(320px,90vw,460px)*.78);height:calc(clamp(320px,90vw,460px)*.22)}
  .feature-note{display:block}
  .venue-scene img{height:clamp(320px,90vw,460px);aspect-ratio:auto}
  .compare-table{border:0;border-radius:0;background:none;overflow:visible}
  .compare-table table,.compare-table tbody,.compare-table tr,.compare-table th,.compare-table td{display:block}
  .compare-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .compare-table tr{margin-bottom:14px;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--paper)}
  .compare-table tbody th{width:auto;padding:16px 18px 10px;border:0;font-size:17px}
  .compare-table td{padding:12px 18px;border-bottom:0;border-top:1px solid var(--line)}
  .compare-table td::before{content:attr(data-label);content:attr(data-label) / "";display:block;margin-bottom:4px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
  .compare-table td:nth-of-type(1)::before{color:var(--on-dark-eyebrow)}
  .privacy-list li{padding-left:52px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .questions summary{font-size:17px}
  .questions details p{padding-right:0}
  .site .footer-top{grid-template-columns:minmax(0,1fr)}
  .footer-links{grid-column:1;grid-row:auto}
}
@media screen and (max-width:760px){
  .compare-table.is-short tbody tr:nth-child(n+4){display:none}
}
@media(max-width:420px){
  .guide-instruction{min-height:5em}
  .site .header-cta{padding-inline:14px}
  .menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hero-actions{display:grid}
  .viewer-scrub{flex-wrap:wrap}
  .viewer-scrub input{flex:1 1 100%;margin-left:0}
  .step{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px}
  .drill-facts strong{font-size:36px}
  .standard-list{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:360px){
  .site .hero-actions .button-large{padding-inline:16px}
  .stage-buttons{gap:4px}
  .stage-buttons button{padding-inline:1px}
  .guide-player{padding:18px 16px}
  .guide-instruction{font-size:18px;min-height:6.25em}
}
@media(min-width:761px) and (min-height:521px){
  .film-dialog{width:min(1040px,calc(100% - 32px),max(600px,calc((100dvh - 410px)*16/9 + 2*clamp(18px,2.4vw,28px) + 2px)))}
}
@media(max-height:520px){
  .film-dialog{padding:12px 16px}
  .film-dialog-head{margin-bottom:8px}
  .film-dialog .kicker{display:none}
  .film-dialog video{width:auto;max-width:100%;max-height:calc(100dvh - 120px);margin-inline:auto}
}
@media(forced-colors:active){
  .stage-buttons button[aria-pressed=true]{outline:3px solid Highlight}
  .menu-bars i{background:ButtonText;forced-color-adjust:none}
  .venue-hotspot[aria-pressed=true],.product-film-chapters button[aria-pressed=true]{outline:3px solid Highlight}
}
@media(prefers-reduced-motion:reduce){
  .site .button:hover,.venue-hotspot:hover{transform:none}
  .has-motion .reveal{opacity:1;transform:none}
  .film-dialog::backdrop{transition:none}
}
@media print{.has-motion .reveal{opacity:1;transform:none;transition:none}.compare-more,.question-search{display:none}.site .device,.guide-card,.partnership-form{box-shadow:none}details::details-content{content-visibility:visible}.questions details::details-content,.disclosure::details-content{block-size:auto;overflow:visible;transition:none}}
html:has(.film-dialog[open]){overflow:hidden}