/* CaddieLab Golf — the round-2 site, built one section at a time with Alex (2026-09-21).
   Photographs lead; the app's own colours (green = measured, amber = act) are used sparingly.
   2026-09-26 green-and-gold rebrand (Alex): --data was --cyan #00E5FF. --map keeps that cyan for anything
   drawn on an aerial photo, the way the app's on-course map stays blue. */
:root{--good:#4ADE80;--warn:#FFA53D;--bad:#FF5A4F;--bg:#0B0F12;--ink:#fff;--ink2:#C9D1D6;--ink3:#8B979E;--data:#2FBF6B;--map:#00E5FF;--amber:#FFB300}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font:17px/1.55 "IBM Plex Sans",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,920px);display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.hero-bg,.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;z-index:-2}
/* the photo stops 3px short of the hero's bottom and the fade runs 1px past it: sub-pixel rounding was leaving one
   bright row of the image uncovered along the bottom edge (a faint horizontal line on the right-hand side) */
.hero-bg{bottom:3px;height:auto}.hero-bg img{height:100%}
/* the photo already has a shadowed fairway on the left; this only deepens it under the words and
   blends the bottom edge into the page */
.hero::after{content:"";position:absolute;inset:0 0 -1px 0;z-index:-1;
  /* ORDER MATTERS: the first layer paints on top. The bottom fade must sit OVER the left-side darkening, or the
     corner under the words ends darker than the page and a horizontal line shows where the hero stops. */
  background:
    linear-gradient(180deg,rgba(11,15,18,0) 48%,rgba(11,15,18,.10) 58%,rgba(11,15,18,.30) 68%,rgba(11,15,18,.58) 78%,rgba(11,15,18,.84) 87%,rgba(11,15,18,.97) 93%,var(--bg) 97%,var(--bg) 100%),
    linear-gradient(90deg,rgba(11,15,18,.62) 0%,rgba(11,15,18,.30) 38%,rgba(11,15,18,0) 62%),
    linear-gradient(180deg,rgba(11,15,18,.38) 0%,rgba(11,15,18,0) 22%)}

.nav{display:flex;align-items:center;justify-content:flex-end;gap:24px;padding:26px clamp(20px,5vw,72px)}
.wordmark{font-size:21px;font-weight:600;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:10px}
.wordmark .mark{width:28px;height:28px;border-radius:7px;flex:none}
.wordmark b{font-weight:600;color:var(--data)}
.wordmark i{font-style:normal;font-weight:400;color:var(--ink2)}
.nav-links{display:flex;gap:30px;margin-left:auto;font-size:15px;color:var(--ink2)}
.nav-links a:hover,.login:hover{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:22px;font-size:15px}
.login{color:var(--ink);font-weight:500;font-size:16px;border:1px solid rgba(255,255,255,.55);padding:10px 22px;border-radius:999px;white-space:nowrap}
.login:hover{background:rgba(255,255,255,.12);border-color:#fff}
.navlink{color:var(--ink2)}.navlink:hover{color:var(--ink)}

.btn{display:inline-block;background:var(--amber);color:#14100a;font-weight:600;font-size:16px;padding:15px 28px;border-radius:999px;transition:transform .15s ease,background .15s ease}
.btn:hover{background:#ffc233;transform:translateY(-1px)}
.btn.small{padding:10px 20px;font-size:14.5px}

.hero-copy{margin:auto 0 0;padding:24px clamp(20px,5vw,72px) clamp(104px,15vh,150px);max-width:calc(760px + clamp(20px,5vw,72px))}
h1.brand{text-align:center;margin-top:clamp(8px,3.5vh,40px);padding:0 16px;font-size:clamp(40px,7vw,100px);line-height:1;font-weight:600;letter-spacing:-.035em;white-space:nowrap}
h1.brand b{font-weight:600;color:var(--data)}
h1.brand i{font-style:normal;font-weight:400;color:rgba(255,255,255,.78)}
.hero-copy .tagline{margin-top:0;font-style:italic;font-size:clamp(30px,3.6vw,52px);line-height:1.15;font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.hero-copy .moments{margin-top:22px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:clamp(16px,1.35vw,18.5px);color:var(--ink2);max-width:none}
.moments a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.55);transition:color .15s ease,text-decoration-color .15s ease}
.moments a:hover,.moments a:focus-visible{color:var(--data);text-decoration-color:var(--data)}
.hero-copy p{margin-top:26px;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink2);max-width:30em;text-wrap:pretty}
.hero-actions{display:flex;align-items:center;gap:28px;margin-top:36px;flex-wrap:wrap}
.quiet{font-size:16px;color:var(--ink);border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:2px;transition:color .15s ease,border-color .15s ease}
.quiet:hover,.quiet:focus-visible{color:var(--data);border-color:var(--data)}
.hero-copy .fine{margin-top:22px;font-size:13.5px;color:rgba(255,255,255,.62)}

/* the three devices: the block is further down (search "hero devices") */

/* ---------- sections ---------- */
.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(16px,5vw,72px)}
.wrap.wide{max-width:1360px}
/* A section opener gets the screen to itself, and HOLDS: the block is taller than the screen and its content is
   pinned, so the words stay put for about two-thirds of a screen of scrolling before the page moves on. */
.moment-section{position:relative;height:260vh;padding:0}
.moment-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.moment-pin .wrap{width:100%}
/* a photo behind an opener: it rides with the pinned block; the left side is darkened under the words and the bottom
   fades into the page, the same way the hero does */
.moment-pin{overflow:hidden;isolation:isolate}
.moment-bg,.moment-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;z-index:-2}
.moment-bg::after{content:"";position:absolute;inset:0 0 -1px 0;z-index:1;
  background:
    linear-gradient(180deg,rgba(11,15,18,0) 60%,rgba(11,15,18,.55) 82%,var(--bg) 100%),
    linear-gradient(90deg,rgba(11,15,18,.82) 0%,rgba(11,15,18,.62) 34%,rgba(11,15,18,.18) 62%,rgba(11,15,18,0) 80%),
    linear-gradient(180deg,rgba(11,15,18,.35) 0%,rgba(11,15,18,0) 25%)}
.js .moment-section.intro .moment-bg{opacity:0;animation:fadein 1.1s ease forwards}
@keyframes fadein{to{opacity:1}}
/* With your friends: the four friends stand mid-frame, so on wide screens the photo is enlarged from its left edge (they
   move right) and the opening lines wrap narrower, keeping the words off the group (Alex, 2026-09-23) */
@media(min-width:761px){
  #group .moment-bg img{transform:scale(1.14);transform-origin:0 60%}
  #group .statement{max-width:10.5em}
}
/* on phones the people fill the bottom of the tall photos, so the words sit higher, in the sky */
@media(max-width:760px){#group .moment-pin .wrap,#after .moment-pin .wrap{margin-bottom:30vh}}
/* both lines share one spot; only the one that is "on" shows */
.swap{display:grid;margin-top:14px}
.swap .statement{grid-area:1 / 1;margin-top:0;opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease}
.swap .statement.on{opacity:1;transform:none;transition:opacity .55s ease .25s,transform .55s ease .25s}
.swap .statement b,.statement b{font-weight:inherit;color:var(--data)}
/* the first opener on a page fades in: the kicker first, then, after a beat, its line (page.js adds .intro on arrival
   and removes it once both are in, so the scroll-driven line change keeps its own timing) */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.js .moment-section.intro .kicker{opacity:0;animation:rise .7s ease .25s forwards}
.js .moment-section.intro .kicker::after{width:0;animation:draw .55s ease .8s forwards}
.js .moment-section.intro .swap .statement.on{opacity:0;transform:translateY(10px);transition:none;animation:rise .8s ease 1.5s forwards}
@keyframes draw{to{width:100%}}
/* a second half of the line that arrives after the first (e.g. "It isn't 148.") */
.statement .late{display:inline-block;font-style:italic}
/* a late word on the line that arrives on scrolling: it comes in further down the hold (page.js sets .late on the section) */
.swap .statement .late{opacity:0;transition:opacity .5s ease}
.moment-section.late .swap .statement.on .late{opacity:1}
.js .moment-section.intro .swap .statement.on .late{opacity:0;animation:rise 1.6s ease 2.8s forwards}
@media(prefers-reduced-motion:reduce){.js .moment-section.intro .kicker,.js .moment-section.intro .swap .statement.on{animation:none;opacity:1;transform:none}.js .moment-section.intro .kicker::after{animation:none;width:100%}.js .moment-section.intro .swap .statement.on .late{animation:none;opacity:1}}
.statement b.u{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em}
@media(prefers-reduced-motion:reduce){.swap .statement{transition:none;transform:none}}
.kicker{position:relative;width:fit-content;padding-bottom:5px;font-size:17px;font-weight:500;color:var(--data);letter-spacing:0}
.kicker::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--data)}
.statement{margin-top:14px;font-size:clamp(32px,4.6vw,64px);line-height:1.04;font-weight:500;letter-spacing:-.035em;max-width:16em;text-wrap:balance}

/* the nine moments, straight from the lab report */
.moments-strip{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:repeat(9,1fr);gap:clamp(6px,.9vw,12px)}
.moments-strip figure{margin:0}
/* the nine frames arrive one after another, quickly, the first time the strip scrolls into view */
.js .moments-strip figure{opacity:0;transform:translateY(14px);transition:opacity .65s ease,transform .65s ease;transition-delay:calc(var(--i) * 120ms)}
.js .moments-strip.in figure{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .moments-strip figure{opacity:1;transform:none;transition:none}}
.moments-strip img{width:100%;height:auto;border-radius:9% / 5.8%}
.moments-strip figcaption{margin-top:10px;font-size:clamp(12px,1.05vw,15px);font-weight:500;color:var(--ink);line-height:1.2}
.strip-note{margin-top:22px;font-size:15px;color:var(--ink3)}

/* a sub-header inside a section: the name, then a hairline out to the edge */
.subhead{display:flex;align-items:center;gap:20px;margin-top:clamp(48px,6vw,84px);font-size:clamp(20px,1.9vw,26px);font-weight:500;letter-spacing:-.01em;white-space:nowrap;color:var(--data)}   /* section headings in the brand blue (Alex, 2026-09-23) */
.moment-section + .wrap .subhead{margin-top:0}
.subhead::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.16)}
.subhead b{font-weight:600;color:var(--data)}

/* ---------- the scroll-driven swing ---------- */
.scrub{height:520vh;position:relative;margin-top:0}
.scrub-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,1.1fr) minmax(0,1fr);
  align-items:center;gap:clamp(20px,4vw,64px);max-width:1360px;margin:0 auto;padding:clamp(52px,7vh,76px) clamp(16px,5vw,72px) 0}
.scrub-pin .subhead{position:absolute;top:clamp(12px,2.2vh,24px);left:clamp(16px,5vw,72px);right:clamp(16px,5vw,72px);margin:0}
.moment-pin .pin-head{position:absolute;top:clamp(12px,2.2vh,24px);left:0;right:0}.pin-head .subhead{margin:0}
.scrub-view{margin:0;display:flex;flex-direction:column;align-items:center}
.scrub-view canvas{width:100%;max-width:min(440px,58svh);height:auto;aspect-ratio:4/5;border-radius:18px;background:#10161a}
.scrub-view figcaption{margin-top:12px;font-size:14px;color:var(--ink3)}
/* the column is the pin's full height: beats centre in the top part, the bar and the hint hold a fixed spot near the
   bottom (they used to sit under the TALLEST beat, and on a short window that was off the screen) */
.scrub-copy{display:grid;grid-template-rows:1fr auto auto;align-self:stretch;padding-bottom:clamp(28px,5vh,52px);min-height:0}
/* every beat shares one grid cell, so the column is as tall as the tallest and nothing jumps as they swap */
.beat{grid-area:1 / 1;align-self:center;opacity:0;transform:translateY(8px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}
.beat.on{opacity:1;transform:none;transition:opacity .3s ease .15s,transform .3s ease .15s}
.beat h3{font-size:clamp(26px,2.7vw,40px);line-height:1.08;font-weight:500;letter-spacing:-.03em;text-wrap:balance}
.beat p{margin-top:12px;font-size:clamp(15.5px,1.2vw,17.5px);color:var(--ink2);text-wrap:pretty}

/* the data boxes: the number, what good players do, and the lab's verdict */
.stats{margin-top:22px;display:grid;gap:10px}
.stat{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label value" "ref value";align-items:center;column-gap:16px;
  padding:14px 18px;border:1px solid rgba(255,255,255,.12);border-left:3px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(255,255,255,.025)}
.stat.good{border-left-color:var(--good)}.stat.warn{border-left-color:var(--warn)}.stat.bad{border-left-color:var(--bad)}
.stat-label{grid-area:label;font-size:15px;font-weight:500;color:var(--ink)}
.stat-ref{grid-area:ref;margin-top:3px;font-size:13px;color:var(--ink3)}
.stat-value{grid-area:value;font-size:clamp(30px,2.9vw,42px);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.stat-value small{font-size:.5em;font-weight:400;letter-spacing:0;color:var(--ink2);margin-left:1px}
.grade{font-weight:500;white-space:nowrap}
.fix-first{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--bad);border:1px solid var(--bad);border-radius:999px;padding:2px 8px;margin-left:8px;vertical-align:2px;white-space:nowrap}
.plain .grade{color:var(--ink2)}
.good .grade{color:var(--good)}.warn .grade{color:var(--warn)}.bad .grade{color:var(--bad)}

.beat .more{margin-top:12px;font-size:14px;line-height:1.45;color:var(--ink3)}
.more b{font-weight:600;color:var(--data)}

/* the drill the app prescribes for that fault (constants/Drills.ts, "Impact Fix Drill"); amber = act */
.drill{display:block;padding:16px 18px 17px;border:1px solid rgba(255,179,0,.35);border-left:3px solid var(--amber);border-radius:10px;background:rgba(255,179,0,.05)}
.drill-kicker{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}
.drill-name{display:block;margin-top:4px;font-size:19px;font-weight:500;letter-spacing:-.01em}
.drill-meta{display:block;margin-top:2px;font-size:13px;color:var(--ink3)}
.beat .drill p{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.beat .drill .drill-feel{margin-top:8px;color:var(--ink)}
.drill-feel b{font-weight:600;color:var(--amber)}

.scrub-bar{grid-area:2 / 1;margin-top:18px;height:2px;background:rgba(255,255,255,.14)}
.scrub-bar i{display:block;height:100%;width:0;background:var(--data)}
.scrub-hint{grid-area:3 / 1;margin-top:8px;font-size:13.5px;color:var(--ink3);transition:opacity .3s}
.scrub.started .scrub-hint{opacity:0}

/* ---------- the lab report: a pattern vs. not a pattern ---------- */
.report-section{padding:0}
/* a hold with one line: shorter than the openers, which change their line partway */
/* the whole opener holds as ONE screen: header at the top, the statement beside the lede, the two charts under them (Alex) */
.moment-section.hold{height:200vh}
/* the statement sits up under the header; the charts centre in the room left below it */
.hold .moment-pin{flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;padding-top:clamp(76px,12vh,120px)}
.hold .moment-pin .wrap:last-child{margin:clamp(56px,11vh,96px) 0 auto;padding-bottom:clamp(16px,3vh,32px)}
.hold .moment-pin .wrap{width:100%}
.hold .statement{margin-top:0;font-size:clamp(30px,3.8vw,58px);max-width:18em}
.hold .charts{margin-top:0}
.hold .chart p{margin-top:12px;font-size:15px}
.hold .chart-key{margin-top:16px}
/* a short window: less air, smaller words, so the screen still holds all of it */
@media(max-height:820px) and (min-width:761px){
  .hold .moment-pin{padding-top:clamp(64px,10vh,96px)}
  .hold .statement{font-size:clamp(26px,3vw,42px)}
  .hold .track{height:80px;margin-top:34px}.hold .finish-svg{max-width:min(500px,60vh)}.hold .chart p{font-size:14px;margin-top:8px}.hold .chart-name{font-size:18px}.hold .chart-key{margin-top:10px}
}
.report-lede{margin-top:26px;max-width:40em;display:grid;gap:14px;font-size:clamp(17px,1.4vw,20px);color:var(--ink2)}
.report-lede p:last-child{color:var(--ink);font-weight:500}
.charts{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)}
.chart{margin:0}
.chart figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.chart-name{font-size:21px;font-weight:500;letter-spacing:-.01em}
.verdict{font-size:15px;font-weight:600}
.chart.bad .verdict{color:var(--bad)}.chart.calm .verdict{color:var(--good)}.chart.warn .verdict{color:var(--warn)}
.track{position:relative;height:96px;margin-top:40px;border-bottom:1px solid rgba(255,255,255,.22)}
.band{position:absolute;top:0;bottom:0;left:var(--band-from);right:calc(100% - var(--band-to));background:rgba(47,191,107,.10);border-left:1px solid rgba(47,191,107,.45);border-right:1px solid rgba(47,191,107,.45);
  opacity:0;transition:opacity .6s ease 2.3s}
.band b,.typical b{position:absolute;top:-26px;font-size:12.5px;font-weight:500;white-space:nowrap}
.band b{left:6px;color:var(--data)}
.chart.calm .band b{left:auto;right:6px}
.typical{position:absolute;top:8px;bottom:0;left:var(--typ);width:2px;background:#fff;transform-origin:bottom;transform:scaleY(0);transition:transform .5s ease 1.9s}
.typical b{left:8px;top:-2px;color:var(--ink);opacity:0;transition:opacity .4s ease 2.2s}
.chart.calm .typical b{left:auto;right:8px}
.dot{position:absolute;left:var(--x);top:calc(58% + var(--y));width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#3987e5;
  opacity:0;transform:translateY(-26px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.3,1);transition-delay:calc(var(--i) * 40ms)}
.dot.i{border-radius:2px;background:#d55181}
.dot.h{border-radius:1px;background:#D5DCE0;transform:translateY(-26px) rotate(45deg)}
.chart.in .dot{opacity:1;transform:none}.chart.in .dot.h{transform:rotate(45deg)}
.chart.in .typical{transform:none}.chart.in .typical b,.chart.in .band{opacity:1}
/* the two swing charts stack on the left; the balls' finish chart stands alone on the right */
.chart-stack{display:grid;gap:clamp(20px,3vh,32px);align-content:start}
.finish-svg{display:block;width:100%;max-width:min(560px,66vh);height:auto;margin:14px auto 0;font-family:inherit}
.chart.finish{align-self:start}.chart.finish figcaption{justify-content:center}.chart.finish .verdict{margin:10px 0 0;max-width:none;text-align:center}
.f-right{fill:rgba(47,191,107,.07)}.f-grid{stroke:rgba(255,255,255,.12)}.f-target{stroke:var(--ink2);stroke-width:2;stroke-dasharray:5 4}
.f-lab{font-size:11px;fill:var(--ink3);text-anchor:middle}.f-lab.f-bold{fill:var(--ink2);font-weight:600}.f-lab.f-end{text-anchor:end}
.finish-svg .mk{opacity:0;transition:opacity .35s ease;transition-delay:calc(var(--i) * 90ms)}
.chart.in .finish-svg .mk{opacity:1}
.mk.w{fill:#3987e5}.mk.i{fill:#d55181}.mk.h{fill:#D5DCE0}.mk.d{fill:var(--amber)}
.dot.d{border-radius:0;background:none;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--amber)}
.axis{position:relative;height:22px;margin-top:8px;font-size:12px;color:var(--ink3)}
.axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.axis span[style*="left:0.00%"]{transform:none}.axis span[style*="left:100.00%"]{transform:translateX(-100%)}
.chart p{margin-top:18px;font-size:16px;color:var(--ink2);max-width:34em;text-wrap:pretty}
.chart-key{margin-top:26px;font-size:13.5px;color:var(--ink3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chart-key .dot{position:static;width:10px;height:10px;opacity:1;transform:none;margin:0 0 0 10px;display:inline-block;transition:none}
.chart-key .dot.h{transform:rotate(45deg)}.chart-key .dot:first-child{margin-left:0}
.chart-key span{margin-left:14px}
/* the report fan: pinned; the pages start as one stack and fan out as you scroll (fan.js sets each page's transform) */
.fan-section{position:relative;height:260vh;margin-top:clamp(24px,4vh,48px)}
.fan-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.fan-pin .wrap{width:100%}
.report-proof{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:center}
.fan{position:relative;justify-self:end;width:min(100%,calc(82svh * .773));max-width:100%;aspect-ratio:8.5/11}
.fan .page{position:absolute;inset:0;width:100%;height:100%;border-radius:6px;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 50px rgba(0,0,0,.55);background:#0E1215;transform-origin:50% 50%}
/* no will-change on the pages: with it the browser drew the page once at its small starting size and stretched that as it
   grew, so page 9 read blurry at full size; without it the page is redrawn sharp at each size */
.fan .page.cover{backface-visibility:hidden}
.fan .page.front{border-color:rgba(255,255,255,.22)}
.fan .page.cover{transform-origin:0 50%;pointer-events:none}
.fan.turning .page.cover{box-shadow:-30px 10px 60px rgba(0,0,0,.6)}
.fan-words p{max-width:17.5em}
.fan-page{margin-top:14px!important;font-size:14px!important;color:var(--ink3)!important;opacity:0;transition:opacity .3s}
.fan-section.open .fan-page{opacity:1}
@media(prefers-reduced-motion:reduce){.fan .page{transition:none}}
.report-proof h3{font-size:clamp(26px,2.8vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.08}
.report-proof h3 b{font-weight:500;color:var(--data);text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em}
.report-proof p{margin-top:16px;color:var(--ink2);font-size:clamp(16px,1.25vw,18px)}
.shot{margin:0;border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;background:#0E1215;padding:20px 22px}
.shot img{width:100%;height:auto}
/* ---------- skeleton parts for the other moments: copy on one side, a picture slot on the other ---------- */
.part{padding:0 0 clamp(56px,7vw,110px)}
.part .subhead{margin-top:0}
.part-grid{margin-top:clamp(28px,3.5vw,48px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:center}
.part.flip .part-copy{order:2}
.part-copy h4{font-size:clamp(26px,2.8vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.part-copy p{margin-top:16px;font-size:clamp(16px,1.25vw,18.5px);color:var(--ink2);max-width:32em;text-wrap:pretty}
.part-copy .part-link{margin-top:28px}
.slot{min-height:clamp(240px,30vw,420px);border:1.5px dashed rgba(255,255,255,.22);border-radius:16px;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.slot span{font-size:13px;letter-spacing:.04em;color:var(--ink3);max-width:26em}

/* pricing + footer (skeleton) */
.pricing{padding:clamp(80px,10vw,150px) 0 0}
.pricing .wrap{max-width:1240px}   /* wide enough that each line of the lists fits on one line, so the section fits its pause */
.price-cols{margin-top:clamp(28px,3.5vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.price-cols h4{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:24px;font-weight:500;letter-spacing:-.02em;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.22)}
.price-cols h4 span{font-variant-numeric:tabular-nums}
.price-alt{margin-top:8px;font-size:14px;color:var(--ink3);text-align:right}
.price-cols li.price-all{color:var(--data);font-weight:500}
.price-cols ul{list-style:none;padding:0;margin-top:6px}
.price-cols li{padding:8px 0;font-size:16.5px;border-bottom:1px solid rgba(255,255,255,.1);color:var(--ink2)}
.price-cta{margin-top:28px}
.foot{margin-top:clamp(80px,10vw,150px);border-top:1px solid rgba(255,255,255,.12);padding:28px 0 40px;font-size:14px;color:var(--ink3)}
.foot-pages{display:flex;gap:26px;flex-wrap:wrap;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.08);font-size:15px;color:var(--ink2)}
.foot-row{display:flex;gap:26px;flex-wrap:wrap}.foot span{margin-right:auto}.foot a:hover{color:var(--ink)}

/* ---------- your practice plan (foundation) ---------- */
.plan-section{padding:0}
.hold .plan-flow{margin-top:0}
.plan-flow{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:1fr auto 1fr auto 1.15fr;align-items:stretch;gap:clamp(12px,1.6vw,24px)}
.plan-card{padding:24px 26px 26px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.025)}
.plan-from{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.plan-card h4{margin-top:12px;font-size:clamp(19px,1.7vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.plan-card p{margin-top:12px;font-size:15.5px;color:var(--ink2)}
.plan-num{font-size:1.5em;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-right:4px}
.plan-num.bad{color:var(--bad)}
.plan-join{align-self:center;font-size:30px;font-weight:300;color:var(--ink3)}
.plan-out{border-color:rgba(255,179,0,.4);background:rgba(255,179,0,.05)}
.plan-out .plan-from{color:var(--amber)}
.plan-out ul{list-style:none;padding:0;margin-top:14px;display:grid;gap:0;border-top:1px solid rgba(255,255,255,.1)}
.plan-out li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px;color:var(--ink2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.plan-out li b{font-weight:500;color:var(--ink)}
.plan-note{margin-top:22px;font-size:15px;color:var(--ink3)}

/* a short window (a laptop with the bookmarks bar open): tighten the middle column so a beat, the bar and the hint all fit */
@media(max-height:760px) and (min-width:761px){
  .beat h3{font-size:clamp(22px,2.2vw,30px)}.beat p{margin-top:8px;font-size:15px}
  .stats{margin-top:14px;gap:7px}.stat{padding:9px 14px}.stat-value{font-size:clamp(24px,2.3vw,32px)}.stat-ref{margin-top:1px}
  .beat .more{margin-top:8px;font-size:13px}.drill{padding:10px 14px}.beat .drill p{margin-top:6px;font-size:13.5px}.drill-name{font-size:17px}
  .scrub-view canvas{max-width:min(440px,52svh)}
}
@media(prefers-reduced-motion:reduce){.dot,.typical,.typical b,.band{transition:none!important}}

/* "Today" — the little card in the corner of the With your friends page (feed.js) */
.feed{position:fixed;right:clamp(14px,2.5vw,32px);bottom:clamp(14px,2.5vw,32px);z-index:20;width:min(360px,calc(100vw - 28px));
  transform:translateY(24px);opacity:0;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.3,1);pointer-events:none}
.feed.on{transform:none;opacity:1;pointer-events:auto}
.feed-card{position:relative;padding:14px 40px 15px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(14,18,21,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.feed-today{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-right:10px}
.feed-kind{font-size:12.5px;font-weight:500;color:var(--data)}
.feed-card[data-kind=host] .feed-kind,.feed-card[data-kind=event] .feed-kind{color:var(--amber)}
.feed-card[data-kind=badge] .feed-kind,.feed-card[data-kind=crown] .feed-kind{color:var(--good)}
.feed-line{margin:6px 0 0;font-size:15px;line-height:1.4;color:var(--ink)}
.feed-close{position:absolute;top:8px;right:10px;width:26px;height:26px;border:0;border-radius:50%;background:none;color:var(--ink3);font:20px/26px "IBM Plex Sans",sans-serif;cursor:pointer}
.feed-close:hover{color:var(--ink);background:rgba(255,255,255,.08)}
@media(prefers-reduced-motion:reduce){.feed{transition:opacity .2s}}
@media(max-width:760px){
  .feed{right:14px;left:14px;bottom:14px;width:auto}.feed-line{font-size:14px}
  .charts,.report-proof,.part-grid,.price-cols{grid-template-columns:1fr}
  .fan{justify-self:center;width:min(100%,calc(58svh * .773))}
  .fan-pin .report-proof{align-content:center;gap:20px}
  .report-proof p{font-size:15px}
  .finish-svg{max-width:520px}
  /* a phone cannot hold the statement and both charts on one screen: the block scrolls like the rest of the page */
  .moment-section.hold{height:auto}.hold .moment-pin{position:static;height:auto;padding:24px 0 8px;gap:28px}
  .hold .moment-pin .pin-head{position:static}
  .part.flip .part-copy{order:0}
  .plan-flow{grid-template-columns:1fr}.plan-join{justify-self:center;line-height:1}
  .chart-key span{margin-left:0;flex-basis:100%}
  .shot{padding:12px}
  .scrub-pin{grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;gap:10px 10px;align-content:start;padding-top:14px}
  .scrub-pin .subhead{position:static;grid-column:1/-1;grid-row:1;margin:0 0 4px;font-size:18px}
  .scrub-view canvas{height:auto;width:100%;border-radius:12px}
  .scrub-view:nth-of-type(1){grid-column:1;grid-row:2}.scrub-view:nth-of-type(2){grid-column:2;grid-row:2}
  .scrub-copy{grid-column:1 / -1;grid-row:3;align-self:start;align-content:start;margin-top:6px}
  .scrub-view figcaption{margin-top:6px;font-size:12px}
  .beat h3{font-size:22px}.beat p{font-size:14.5px;margin-top:6px}
  .stats{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
  .stat{grid-template-columns:1fr;grid-template-areas:"label" "value" "ref";padding:9px 9px 10px;border-left-width:1px;border-top:3px solid rgba(255,255,255,.25);row-gap:4px}
  .stat.good{border-top-color:var(--good)}.stat.warn{border-top-color:var(--warn)}.stat.bad{border-top-color:var(--bad)}
  .stat-label{font-size:12px;line-height:1.2}.stat-value{font-size:24px}.stat-ref{font-size:11px;margin-top:0;line-height:1.25}
  .grade{display:block}
  .fix-first{display:inline-block;margin:4px 0 0;font-size:9.5px;padding:1px 6px}
  .beat[data-beat="finish"] .stats{grid-template-columns:1fr}
  .beat[data-beat="finish"] .stat{grid-template-columns:1fr auto;grid-template-areas:"label value" "ref value";border-top-width:1px;border-left:3px solid var(--bad)}
  .drill{padding:11px 12px}.drill-name{font-size:16px}.beat .drill p{font-size:13px;margin-top:6px}
  .beat .more{margin-top:8px;font-size:12.5px}.more span{display:none}
  .scrub-bar{margin-top:14px}.scrub-hint{display:none}
  .moments-strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:40vw;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;
    margin-left:-16px;margin-right:-16px;padding:0 16px 8px;scrollbar-width:none}
  .moments-strip::-webkit-scrollbar{display:none}
  .moments-strip figure{scroll-snap-align:start}
  .moments-strip figcaption{font-size:14px}
  .hero{min-height:100svh}
  .hero-bg img{object-position:50% 40%}
  .hero::after{background:linear-gradient(180deg,rgba(7,10,12,.35) 0%,rgba(7,10,12,0) 18%,rgba(7,10,12,0) 40%,rgba(11,15,18,.5) 60%,rgba(11,15,18,.78) 78%,rgba(11,15,18,.95) 92%,var(--bg) 100%)}
  .nav{padding:18px 16px}.nav-actions{gap:16px}
  .hero-copy .moments{flex-direction:column;gap:4px}
  .hero-copy{margin:auto 0 0;padding:0 16px 84px}
}

/* ---------- On the course: meet your caddie (caddie.js) ---------- */
/* one held screen, the card's number on the left turns into what the shot plays as the reasons land beside it */
.moment-section.caddie-hold{height:440vh}   /* long enough that the call and its two columns get a full screen of scrolling before the fade (Alex) */
/* the part sits near the top of the held screen, a clear gap under the "Meet your caddie" header (Alex) */
.caddie-hold .moment-pin{align-items:flex-start;padding-top:clamp(96px,15vh,150px)}
.caddie-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.caddie-label{display:grid;font-size:clamp(17px,1.5vw,21px);color:var(--ink2)}
.caddie-label span{grid-area:1 / 1;opacity:0;transition:opacity .4s ease}
.caddie-label span.on{opacity:1}
.yardage{margin-top:4px;font-size:clamp(110px,15vw,230px);font-weight:500;letter-spacing:-.055em;line-height:.9;font-variant-numeric:tabular-nums;white-space:nowrap}
.yardage span{transition:color .5s ease}
.yardage.done span{color:var(--data)}
.yardage small{font-size:.14em;font-weight:400;letter-spacing:0;color:var(--ink3);margin-left:.35em}
.adjust{list-style:none;padding:0}
.adjust li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:clamp(17px,1.4vw,20px);color:var(--ink2)}
.adjust b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
/* the club call: one line across, then the why on the left and the caddie's memory of the spot on the right */
.call-head{margin-top:clamp(64px,12vh,124px);font-size:clamp(24px,2.3vw,36px);font-weight:500;letter-spacing:-.03em;line-height:1.15;text-wrap:balance}
.call-head b{font-weight:500;color:var(--amber)}
.call-grid{align-items:start;margin-top:clamp(30px,5vh,52px)}
/* the two columns read as one voice: same size, colour and spacing (Alex) */
.call-why,.memory{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--ink2);text-wrap:pretty}
.call-why{max-width:30em}
.memory p{padding-left:16px;border-left:2px solid var(--data)}   /* each line its own blue rule (Alex) */
.js .caddie-hold [data-step]{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.js .caddie-hold [data-step].on{opacity:1;transform:none}
/* the club line lands on its own; the two columns follow together a moment later */
.js .caddie-hold .call-why[data-step].on,.js .caddie-hold .memory[data-step].on{transition-delay:.8s}
.memory-course{margin-top:16px}
@media(prefers-reduced-motion:reduce){.js .caddie-hold [data-step]{transform:none;transition:opacity .2s}.caddie-label span{transition:none}}
@media(max-width:760px){
  .caddie-grid{grid-template-columns:1fr;gap:18px}
  .yardage{font-size:clamp(70px,20vw,96px)}
  .adjust li{padding:6px 0;font-size:16px}
  .caddie-hold .moment-pin{padding-top:76px}
  .call-head{margin-top:36px;font-size:21px}
  .call-grid{margin-top:20px;gap:14px}
  .call-why{font-size:15.5px}
  .memory{font-size:15.5px}.memory-course{margin-top:12px}
}
/* a short laptop window: the number, the reasons and the call still fit one held screen */
@media(max-height:780px) and (min-width:761px){
  .caddie-hold .moment-pin{padding-top:clamp(72px,11vh,96px)}
  .yardage{font-size:clamp(90px,11vw,150px)}
  .adjust li{padding:9px 0}
  .call-head{margin-top:52px}
  .call-grid{margin-top:26px}
  .call-why,.memory{font-size:16px}
}
/* a small phone (iPhone SE, 667 tall): the number, the four reasons and the call must still fit the held screen */
@media(max-width:760px) and (max-height:720px){
  .caddie-hold .moment-pin{padding-top:68px}
  .caddie-grid{gap:6px}
  .yardage{font-size:clamp(58px,17vw,72px)}
  .adjust li{padding:4px 0;font-size:14px}
  .call-head{margin-top:26px;font-size:18px}
  .call-grid{margin-top:14px;gap:8px}
  .call-why{font-size:13.5px;line-height:1.45}
  .memory{font-size:13.5px;line-height:1.45}.memory-course{margin-top:6px}
}

/* the course's approaches (two-tone by strokes to finish) and your 7-iron (scripts/websiteCaddieKnowCharts.py) */
.caddie-know{position:relative;padding-top:clamp(56px,8vh,96px)}   /* the gap under the held screen; caddie.js pulls this section up into the hold's empty bottom */
.know-charts{margin-top:0}
.know-svg{display:block;width:100%;height:auto;margin-top:14px;font-family:inherit}
.know-svg .f-lab{font-size:13.5px}
.k-green{fill:rgba(74,222,128,.08);stroke:rgba(74,222,128,.35);stroke-width:1.5}
.k-bunker{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.22);stroke-width:1.2}
.k-pole{stroke:var(--ink);stroke-width:1.6}.k-flag{fill:var(--ink)}
.k-call{stroke:rgba(255,255,255,.35);stroke-width:1}
.f-lab.k-bad{fill:var(--bad)}.f-lab.k-good{fill:var(--data)}.f-lab.k-left{text-anchor:start;fill:var(--ink)}
.know-svg .mk{opacity:0;transition:opacity .4s ease;transition-delay:calc(var(--i) * 7ms)}
.chart.in .know-svg .mk{opacity:var(--o,.8)}
.know-svg .mk.g{fill:var(--data)}.know-svg .mk.b{fill:var(--bad)}
.know-svg .mk.c{fill:var(--data);transition-delay:calc(var(--i) * 22ms)}
.k-avg{fill:none;stroke:var(--ink);stroke-width:1.6}.k-avg-x{stroke:var(--ink);stroke-width:1.2}
.kd{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:10px}.kd:first-child{margin-left:0}
.kd.g{background:var(--data)}.kd.b{background:var(--bad)}
@media(prefers-reduced-motion:reduce){.know-svg .mk{transition:none}}
/* A section that PAUSES for a moment while you scroll (Alex, 2026-09-23: "we will probably do this to most sections").
   Wrap what should stop in .hold-pin and put an empty .hold-pause straight after it: the pin sticks while the pause
   scrolls past, so the pause's height is how long it holds. page.js sets the pin's top so it stops centred on the
   screen, or, when it is taller than the screen (phones), with its bottom on the screen's bottom. */
.hold-pin{position:sticky;top:0}
.hold-pause{height:55vh}
/* the three call-out labels ("Left of the pin", "Short right", the 7-iron's average) wait, then fade in once the pictures pause (caddie.js adds .late-in) */
.js .know-svg .k-late{opacity:0;transition:opacity .7s ease .25s}
.js .know-svg.late-in .k-late{opacity:1}
@media(prefers-reduced-motion:reduce){.js .know-svg .k-late{transition:opacity .2s}}
/* a part's short list of points: a bold lead-in, the rest in the body colour, hairlines between (On your wrist) */
.part-points{list-style:none;padding:0;margin-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.part-points li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:clamp(16px,1.25vw,18.5px);color:var(--ink2);text-wrap:pretty}
.part-points b{font-weight:500;color:var(--ink)}

/* ---------- On your wrist: the Watch app's screens on the photo's watch (caddie.js) ---------- */
/* .watch-screens is a 400×406 "screen" that caddie.js bends onto the glass's four measured corners; no background of its
   own, so the photo's glass shows through as a lit watch's black does outdoors. Sizes are the app's points ×2. */
/* The photo fills the section edge to edge, the watch large on the left, and a vignette fades everything but the watch
   into the page; the words sit on the dark right side (Alex). caddie.js sizes the photo (the watch's screen ≈ a fifth
   of the section's width), places it, and centres the vignette on the watch (--vx/--vy/--r). */
.watch-part{padding-bottom:clamp(24px,4vw,56px)}
.watch-stage{position:relative;height:clamp(460px,calc(100svh - 150px),780px);margin-top:clamp(8px,1.5vw,20px)}   /* heading + stage fit one screen, so the pause stops on all of it */
.watch-demo{position:absolute;inset:0;overflow:hidden;margin:0}
.watch-demo img{position:absolute;max-width:none;height:auto;left:0;top:0}
.watch-vignette{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,var(--bg) 0%,rgba(11,15,18,0) 22%,rgba(11,15,18,0) 78%,var(--bg) 100%),
    linear-gradient(90deg,var(--bg) 0%,rgba(11,15,18,0) 14%),
    radial-gradient(circle at var(--vx,30%) var(--vy,50%),rgba(11,15,18,0) calc(var(--r,150px) * .95),rgba(11,15,18,.55) calc(var(--r,150px) * 1.45),rgba(11,15,18,.9) calc(var(--r,150px) * 2),var(--bg) calc(var(--r,150px) * 2.6))}
.watch-copy{position:relative;z-index:3;height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.watch-copy .part-copy{grid-column:2}
@media(max-width:760px){
  .watch-stage{height:auto}
  .watch-demo{position:relative;inset:auto;height:clamp(300px,92vw,440px)}
  .watch-copy{display:block;height:auto;margin-top:8px}
}
.watch-screens{position:absolute;left:0;top:0;z-index:2;width:400px;height:406px;transform-origin:0 0;pointer-events:none;visibility:hidden}
.watch-screens.placed{visibility:visible}
.ws{position:absolute;inset:0;padding-top:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;   /* padding: the clock's row stays clear */
  
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,"IBM Plex Sans",system-ui,sans-serif;color:#fff;line-height:1.1;
  opacity:0;transition:opacity .8s ease}
.ws.on{opacity:1}
.ws span{display:block;white-space:nowrap}
.ws-time{position:absolute;top:28px;right:50px;font-size:32px;font-weight:600}
.ws-head{font-size:32px;font-weight:700}
.ws-yds{font-size:124px;font-weight:700;line-height:.95;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ws-yds.pin{color:#FFB300}                  /* amber = today's pin, the app's one meaning for it */
.ws-plays{font-size:32px;font-weight:600}
.ws-plays i{font-style:normal;font-weight:800}.ws-plays i.up{color:#FF9500}.ws-plays i.down{color:var(--map)}
.ws-plays b{font-size:36px;font-weight:700}.ws-plays em{font-style:normal;font-size:36px;font-weight:800}
.ws-fcb{font-size:31px;font-weight:500}
.ws-moved{font-size:28px;font-weight:600;color:#FF9500;margin-bottom:2px}
.ws-ask{margin-top:8px;font-size:30px;font-weight:600;color:#FFB300}
.ws-btns{display:flex!important;gap:12px}
.ws-btns span{padding:9px 24px;border-radius:999px;font-size:30px;font-weight:700}
.ws-yes{background:#FFB300;color:#000}.ws-no{background:rgba(255,255,255,.22)}
/* the point whose screen is showing */
.watch-points li{transition:color .4s ease}
.watch-points b{transition:color .4s ease}
.watch-points.live li.on b{color:var(--data)}
@media(prefers-reduced-motion:reduce){.ws{transition:none}}
.part-link-inline{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.part-link-inline:hover{color:var(--data);text-decoration-color:var(--data)}

/* Shot tracking: an aerial of one hole with the tracked shots drawn over it in the image's own pixels; they draw in once
   it is in view (.chart.in, page.js). Sizes are in the image's pixels (1200 wide), so about half on a laptop. */
.track-map{margin:0}
.track-frame{position:relative;border-radius:16px;overflow:hidden}
.track-frame img{width:100%;height:auto}
.track-svg{position:absolute;inset:0;width:100%;height:100%;font-family:inherit}
.t-shot{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.t-shot.chip{stroke-width:5}.t-shot.putt{stroke-width:4.5}
.t-start{fill:none;stroke:#fff;stroke-width:4}
.t-dot{fill:var(--data);stroke:#fff;stroke-width:3;opacity:0}
.t-cup{fill:none;stroke:#FFB300;stroke-width:4;opacity:0}
.t-lab{font-size:34px;font-weight:600;fill:#fff;text-anchor:middle}
.t-lab-bg{fill:rgba(8,12,14,.72)}   /* the dark box behind each label, sized by caddie.js */
.t-lab-g{opacity:0}                  /* a label + its box: they fade in as one (caddie.js groups them) */
.t-lab.end{text-anchor:end}
.chart.in .t-shot{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease-in-out var(--d)}   /* slowed ×1.6 (Alex) */
.chart.in .t-shot.chip{transition-duration:1s}.chart.in .t-shot.putt{transition-duration:.6s}
.chart.in .t-dot,.chart.in .t-lab-g,.chart.in .t-cup{opacity:1;transition:opacity .6s ease var(--d)}
@media(prefers-reduced-motion:reduce){.t-shot{stroke-dashoffset:0}.t-dot,.t-lab-g,.t-cup{opacity:1}.chart.in .t-shot,.chart.in .t-dot,.chart.in .t-lab-g,.chart.in .t-cup{transition:none}}
@media(max-width:760px){.t-lab{font-size:48px}}   /* the photo is ~340px wide on a phone: keep the labels ~14px */

/* ---------- a photo that fills its section, faded into the page around its subject (A rules official) ---------- */
/* Like On your wrist, but a plain photo: object-fit covers the stage, --fx/--fy is where the subject sits in the
   photo and in the frame, and the vignette keeps that spot clear. The words sit on the other, dark side. */
.photo-part{padding-bottom:clamp(24px,4vw,56px)}
.photo-stage{position:relative;height:clamp(460px,calc(100svh - 150px),780px);margin-top:clamp(8px,1.5vw,20px)}
.photo-bg{position:absolute;inset:0;margin:0;overflow:hidden}
.photo-bg img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%)}
.photo-vignette{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,var(--bg) 0%,rgba(11,15,18,0) 20%,rgba(11,15,18,0) 80%,var(--bg) 100%),
    radial-gradient(ellipse var(--rw,34%) var(--rh,62%) at var(--vx,70%) var(--vy,50%),rgba(11,15,18,0) 45%,rgba(11,15,18,.6) 75%,var(--bg) 100%)}
.photo-copy{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.rules-stage{--vx:70%;--vy:52%}
/* The photo COVERS the whole stage, edge to edge (Alex), anchored to its BOTTOM so the ball on the grass (~94% down the
   photo) stays in view above a thin bottom fade; the little that is cropped comes off the sky. The fades: dark under the
   words on the left, and on the right past the spectator, the way the Watch photo fades (Alex). */
.rules-stage .photo-bg img{object-position:50% 100%}
.rules-stage .photo-copy{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}   /* the words stop short of the golfer */
.rules-stage .photo-vignette{background:
    linear-gradient(180deg,var(--bg) 0%,rgba(11,15,18,0) 9%,rgba(11,15,18,0) 95.5%,var(--bg) 100%),
    linear-gradient(90deg,var(--bg) 0%,rgba(11,15,18,.9) 20%,rgba(11,15,18,.55) 34%,rgba(11,15,18,0) 46%),
    linear-gradient(270deg,var(--bg) 0%,rgba(11,15,18,.6) 8%,rgba(11,15,18,0) 16%),
    radial-gradient(ellipse 46% 85% at 64% 50%,rgba(11,15,18,0) 62%,rgba(11,15,18,.4) 90%,rgba(11,15,18,.7) 100%)}
@media(max-width:760px){
  .photo-stage{height:auto}
  .photo-bg{position:relative;inset:auto;height:clamp(280px,85vw,420px)}
  /* a phone: the photo covers the frame, the group (x ≈ 71% of the photo) in view, anchored to the bottom for the ball */
  .rules-stage .photo-bg img{object-position:74% 100%}
  .rules-stage .photo-vignette{background:linear-gradient(180deg,var(--bg) 0%,rgba(11,15,18,0) 12%,rgba(11,15,18,0) 95%,var(--bg) 100%),linear-gradient(90deg,var(--bg) 0%,rgba(11,15,18,0) 12%),linear-gradient(270deg,var(--bg) 0%,rgba(11,15,18,0) 12%)}
  .photo-copy{display:block;height:auto;margin-top:8px}
}

/* ---------- the Rules Official, acted out over the rules photo (caddie.js plays it) ---------- */
/* The app's colours (constants/Theme.ts): card #171D22, raised #12171B, overlay #1F262C, cyan = the user's bubble and
   the rule badges, ink on cyan #100B00. A longer pause for this section: the demo takes about nine seconds. */
.hold-pause.long{height:130vh}
.rules-demo{position:absolute;z-index:3;right:clamp(16px,4vw,64px);top:50%;transform:translateY(-50%);
  width:clamp(320px,29vw,410px);height:min(620px,calc(100% - 36px));display:flex;flex-direction:column;
  background:#12171B;border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55);font-size:14px;line-height:1.45}
.js .rules-demo{opacity:0;transform:translate(28px,-50%);transition:opacity .6s ease,transform .6s ease}
.js .rules-demo.open{opacity:1;transform:translate(0,-50%)}
.rd-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:#171D22}
.rd-icon{width:20px;height:20px;fill:none;stroke:var(--data);stroke-width:1.6}
.rd-title{font-weight:600;font-size:15px}
.rd-msgs{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;padding:14px 14px 6px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.rd-row{display:flex;align-items:flex-end;gap:8px}
.rd-row.user{justify-content:flex-end}
.rd-avatar{flex:none;width:28px;height:28px;border-radius:50%;background:rgba(47,191,107,.19);display:grid;place-items:center}
.rd-avatar svg{width:16px;height:16px;fill:none;stroke:var(--data);stroke-width:1.6}
.rd-bubble{max-width:84%;background:#171D22;border-radius:14px;border-bottom-left-radius:4px;padding:12px;color:var(--ink)}
.rd-bubble.user{background:var(--data);color:#100B00;border-radius:14px;border-bottom-right-radius:4px;font-weight:500}
.rd-photo{display:block;width:100%;height:96px;object-fit:cover;object-position:80% 96%;border-radius:10px;margin-bottom:8px}
.rd-thinking .rd-bubble{display:flex;align-items:center;gap:10px;color:var(--ink2)}
.rd-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(168,179,186,.35);border-top-color:#A8B3BA;animation:rdspin .8s linear infinite}
@keyframes rdspin{to{transform:rotate(360deg)}}
.rd-cited{margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#7C888F}
.rd-cite{display:block;margin-top:8px;background:#12171B;border-left:3px solid var(--data);border-radius:8px;padding:9px 10px}
.rd-cite-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.rd-cite-top b{background:var(--data);color:#100B00;font-size:11.5px;font-weight:700;border-radius:5px;padding:1px 6px;white-space:nowrap}
.rd-cite-top span{font-size:11.5px;color:#A8B3BA;line-height:1.25}
.rd-cite q{display:block;font-style:italic;font-size:13px;line-height:1.4;color:var(--ink);quotes:"“" "”"}
.rd-more{display:block;margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08);font-size:11.5px;font-weight:600;color:var(--data)}
.rd-conf{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;color:#7C888F}
.rd-conf i{width:8px;height:8px;border-radius:50%;background:var(--good)}
.rd-pending{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:var(--ink2)}
.rd-pending img{width:40px;height:40px;object-fit:cover;object-position:80% 96%;border-radius:6px}
.rd-input{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);background:#12171B}
.rd-cam{flex:none;width:22px;height:22px;fill:none;stroke:#A8B3BA;stroke-width:1.6}
.rd-field{flex:1;min-width:0;min-height:40px;display:flex;align-items:center;padding:8px 12px;border:1px solid rgba(255,255,255,.14);border-radius:8px;font-size:13.5px;color:var(--ink);overflow:hidden;white-space:nowrap}
.rd-typed{flex:none;white-space:pre}
.rd-field.long{justify-content:flex-end}   /* once the text outgrows the field, it scrolls left as it types (caddie.js) */
.rd-caret{flex:none;width:1.5px;height:16px;background:var(--data);margin-left:1px;opacity:0}
.rules-demo.typing .rd-caret{opacity:1;animation:rdblink 1s steps(1) infinite}
@keyframes rdblink{50%{opacity:0}}
.rd-ph{color:#7C888F}
.rules-demo.typing .rd-ph,.rules-demo.has-text .rd-ph{display:none}
.rd-send{flex:none;width:20px;height:20px;fill:#7C888F;transition:fill .3s}
.rules-demo.has-text .rd-send{fill:var(--data)}
.rd-disc{padding:0 14px 12px;background:#12171B;text-align:center;font-size:10.5px;color:#7C888F}
/* the steps: each piece appears when caddie.js reaches it (without JavaScript everything shows, finished) */
.js .rd-step{display:none}
.js .rd-step.on{display:flex;animation:rdin .45s ease both}
.js .rd-bubble .rd-step.on{display:block}
.js .rd-bubble .rd-conf.on{display:flex}
.js .rd-step.gone{display:none}
@keyframes rdin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.js .rules-demo,.js .rd-step.on{transition:none;animation:none}.rules-demo.typing .rd-caret{animation:none}}
@media(max-width:760px){
  .rules-demo{position:relative;right:auto;top:auto;transform:none;width:auto;height:560px;margin:22px clamp(16px,5vw,72px) 0}
  .js .rules-demo{transform:translateY(16px)}
  .js .rules-demo.open{transform:none}
}

/* ================= After the round (after.js; the pauses are the shared .hold-pin, which gets .held) ================= */
/* shared: a pill switch (benchmarks, you / everyone) */
.sg-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.sg-pick button{font:inherit;font-size:15px;color:var(--ink2);background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 18px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.sg-pick button:hover{color:var(--ink);border-color:rgba(255,255,255,.5)}
.sg-pick button.on{background:var(--ink);color:#0B0F12;border-color:var(--ink)}

/* Where the strokes went: the ledger — what the group shoots, the four parts, what you shot */
.sg-head b{font-weight:inherit;color:var(--bad)}
.sg-card{margin:0;padding:clamp(20px,2.4vw,32px);border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#0E1316}
.sg-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:17px;color:var(--ink2)}
.sg-line b{font-size:clamp(28px,2.6vw,40px);font-weight:500;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.sg-start{padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1)}
.sg-end{padding-top:14px;margin-top:6px;border-top:1px solid rgba(255,255,255,.1)}
.sg-row{display:grid;grid-template-columns:minmax(0,9.5em) 1fr 3.6em;align-items:center;gap:16px;padding:13px 0}
.sg-name{font-size:16.5px;color:var(--ink)}
.sg-track{position:relative;height:16px}
.sg-track::before{content:"";position:absolute;left:50%;top:-8px;bottom:-8px;width:1px;background:rgba(255,255,255,.28)}
.sg-bar{position:absolute;top:0;height:100%;left:50%;width:0;border-radius:4px;transition:left .8s cubic-bezier(.2,.8,.2,1),width .8s cubic-bezier(.2,.8,.2,1),background .4s}
.held .sg-bar{left:var(--l);width:var(--w);transition-delay:calc(var(--i,0) * .15s)}
.sg-row:nth-child(2) .sg-bar{--i:0}.sg-row:nth-child(3) .sg-bar{--i:1}.sg-row:nth-child(4) .sg-bar{--i:2}.sg-row:nth-child(5) .sg-bar{--i:3}
.sg-bar.loss{background:var(--bad)}.sg-bar.gain{background:var(--good)}
.sg-val{text-align:right;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.sg-val.loss{color:var(--bad)}.sg-val.gain{color:var(--good)}
.sg-card figcaption{margin-top:14px;font-size:13.5px;color:var(--ink3)}

/* Your caddie's debrief: the scorecard fills in hole by hole, then the notes card writes itself */
.scorecard{margin-top:clamp(16px,2.2vw,26px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,36px);align-items:start}
.sc-key{grid-column:1 / -1;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink3);margin-top:-4px}
.sc-key .sc-k{margin-left:10px}.sc-key .sc-k:first-child{margin-left:0}
.sc-nine{width:100%;border-collapse:collapse;text-align:center;font-variant-numeric:tabular-nums;font-size:14.5px}
.sc-nine th,.sc-nine td{padding:5px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.sc-nine thead th{font-size:12.5px;font-weight:500;color:var(--ink3)}
.sc-lab{text-align:left!important;width:3.4em;font-size:12.5px;font-weight:500;color:var(--ink3)}
.sc-par td{color:var(--ink3)}
.sc-sum{background:rgba(255,255,255,.04);font-weight:600;color:var(--ink)}
.sc-s span,.sc-sum span,.sc-k{display:inline-grid;place-items:center;width:28px;height:28px;font-weight:600;color:var(--ink);box-sizing:border-box}
.sc-k{width:22px;height:22px;font-size:12px}
.sc-nine .birdie span,.sc-k.birdie{border:1.5px solid var(--data);border-radius:50%;color:var(--data)}
.sc-nine .bogey span,.sc-k.bogey{border:1.5px solid rgba(255,255,255,.5)}
.sc-nine .double span,.sc-k.double{border:1.5px solid rgba(255,255,255,.5);box-shadow:0 0 0 2.5px var(--bg),0 0 0 4px rgba(255,255,255,.5)}
.js .sc-you td span{opacity:0;transform:scale(.55)}
.held .sc-you td span{opacity:1;transform:none;transition:opacity .35s ease calc(var(--i) * .09s),transform .35s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * .09s)}
.notes-grid{margin-top:clamp(22px,3vw,40px);align-items:start}
.notes-card{border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#12171B;padding:22px 24px 16px}
.nc-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink3)}
.nc-kicker{font-weight:600;color:var(--data)}
.nc-head{margin-top:8px;font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.nc-sum{margin-top:6px;font-size:15.5px;color:var(--ink2)}
.nc-lab{margin-top:16px;font-size:13.5px;font-weight:600}
.nc-lab.good{color:var(--good)}.nc-lab.bad{color:var(--bad)}
.notes-card ul{list-style:none;padding:0;margin-top:4px}
.notes-card li{padding:7px 0;border-top:1px solid rgba(255,255,255,.07);font-size:15px;color:var(--ink2)}
.notes-card li b{font-weight:500;color:var(--ink)}
.js .notes-card>*{opacity:0;transform:translateY(8px)}
.held .notes-card>*{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.held .notes-card>:nth-child(1){transition-delay:1.9s}.held .notes-card>:nth-child(2){transition-delay:2.1s}.held .notes-card>:nth-child(3){transition-delay:2.3s}
.held .notes-card>:nth-child(4){transition-delay:2.6s}.held .notes-card>:nth-child(5){transition-delay:2.75s}.held .notes-card>:nth-child(6){transition-delay:3s}.held .notes-card>:nth-child(7){transition-delay:3.15s}

/* Know where to miss: the scoring-zones heat map over the par 3; each cell holds both colours (--cy/--oy you, --ca/--oa everyone) */
.zones-grid{grid-template-columns:1.2fr .8fr}
.zones-map{margin:0}
.zones-svg{position:absolute;inset:0;width:100%;height:100%;font-family:inherit}
.zone-cells rect{fill:var(--cy);opacity:0;transition:fill .6s ease,opacity .6s ease;transition-delay:calc(var(--i) * 6ms)}
.held .zones-svg.you .zone-cells rect{fill:var(--cy);opacity:var(--oy)}
.held .zones-svg.all .zone-cells rect{fill:var(--ca);opacity:var(--oa)}
.zone-lab{opacity:0;transition:opacity .5s ease}
.held .zones-svg.you .you-lab,.held .zones-svg.all .all-lab{opacity:1;transition-delay:.9s}
.zones-key{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;color:var(--ink3)}
.zk{width:12px;height:12px;border-radius:3px;margin-left:10px}.zk:first-child{margin-left:0}
.zk.good{background:var(--map)}.zk.bad{background:var(--bad)}
.zones-note{margin-top:14px;font-size:13.5px;color:var(--ink3)}
.zones-pick{margin-top:22px}

/* A handicap that keeps itself: the last twenty rounds, the best eight lit, the index line, the number counting down */
.hc-number{margin-top:26px;display:grid;gap:2px}
.hc-lab{font-size:14px;color:var(--ink3)}
.hc-val{font-size:clamp(56px,6vw,88px);font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.hc-delta{font-size:15px;color:var(--good);opacity:0;transition:opacity .5s ease}
.held .hc-delta{opacity:1;transition-delay:3.4s}
.hc-card{margin:0;padding:clamp(16px,2vw,26px);border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#0E1316}
.hc-svg{display:block;width:100%;height:auto;font-family:inherit}
.hc-grid{stroke:rgba(255,255,255,.08)}
.hc-ax{font-size:12px;fill:var(--ink3);text-anchor:end}.hc-ax.start{text-anchor:start}
.hc-index{stroke:var(--data);stroke-width:1.5;stroke-dasharray:6 5;opacity:0;transition:opacity .6s ease}
.hc-index-lab{font-size:14px;font-weight:600;fill:var(--data);text-anchor:end;opacity:0;transition:opacity .6s ease}
.hc-dot{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.6;opacity:0;transition:opacity .3s ease calc(var(--i) * 55ms)}
.hc-dot.today{stroke:#fff;stroke-width:2.4}
.hc-today{font-size:13px;font-weight:600;fill:var(--ink);text-anchor:middle;opacity:0;transition:opacity .5s ease}
.held .hc-dot{opacity:1}
.held .hc-dot.best{fill:var(--data);stroke:var(--data);transition:opacity .3s ease calc(var(--i) * 55ms),fill .5s ease 1.5s,stroke .5s ease 1.5s}
.held .hc-dot.best.today{stroke:#fff}
.held .hc-index,.held .hc-index-lab{opacity:1;transition-delay:2s}
.held .hc-today{opacity:1;transition-delay:1.2s}
.hc-key{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;color:var(--ink3)}
.hk{width:11px;height:11px;border-radius:50%;margin-left:10px}.hk:first-child{margin-left:0}
.hk.best{background:var(--data)}.hk.rest{border:1.5px solid rgba(255,255,255,.4)}

/* Then go fix it: the plan card from the range page */
.fix-plan{max-width:460px}
.fix-link{margin-top:22px}
@media(prefers-reduced-motion:reduce){.sg-bar,.sc-you td span,.notes-card>*,.zone-cells rect,.hc-dot,.hc-index,.hc-index-lab,.hc-today,.hc-delta,.zone-lab{transition:none!important}}
@media(max-width:760px){
  .sg-row{grid-template-columns:minmax(0,7.5em) 1fr 3.2em;gap:10px}
  .sg-name{font-size:15px}
  .scorecard{grid-template-columns:1fr}
  .sc-s span,.sc-sum span{width:24px;height:24px}
  .zones-grid{grid-template-columns:1fr}
}

/* ================= With your friends (friends.js; the pauses are the shared .hold-pin, which gets .held) ================= */
/* a shared card look: the live leaderboard and the league table */
.lb-card{margin:0;padding:clamp(18px,2.2vw,28px);border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#0E1316}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--ink2)}
.lb-title{font-weight:600;color:var(--ink)}
.lb-live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--bad)}
.lb-live i{width:8px;height:8px;border-radius:50%;background:var(--bad);animation:lbpulse 1.6s ease-in-out infinite}
@keyframes lbpulse{50%{opacity:.25}}
.lb-thru{margin-top:4px;font-size:13.5px;color:var(--ink3)}.lb-thru b{color:var(--ink2);font-weight:600}
.lb-rows{list-style:none;padding:0;margin-top:14px;display:grid;gap:8px}
.lb-row{position:relative;display:grid;grid-template-columns:2.2em 36px 1fr auto auto;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;background:#151B20;border:1px solid rgba(255,255,255,.05)}
.lb-row.me{border-color:rgba(47,191,107,.45);background:rgba(47,191,107,.06)}
.lb-pos{font-size:14px;font-weight:600;color:var(--ink3);font-variant-numeric:tabular-nums}
.lb-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#232B31;font-weight:600;font-size:14px}
.lb-row.me .lb-av{background:var(--data);color:#0B0F12}
.lb-name{font-size:16.5px;font-weight:500}
.lb-par{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;min-width:2.2em;text-align:right}
.lb-row.under .lb-par{color:var(--bad)}   /* golf's own convention: under par in red */
.lb-flash{font-size:12px;font-weight:700;color:#0B0F12;background:var(--data);border-radius:999px;padding:2px 9px;opacity:0;transform:scale(.7)}
.lb-row.birdie .lb-flash{animation:lbflash 1.4s ease forwards}
@keyframes lbflash{15%{opacity:1;transform:scale(1.08)}30%{transform:none}80%{opacity:1}100%{opacity:0}}

/* When there's money on it: a slow ribbon of every game, then the settle-up */
.games-ribbon{margin-top:clamp(14px,2vw,24px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.gr-track{display:flex;gap:10px;width:max-content;animation:grslide 60s linear infinite}
.gr-track span{white-space:nowrap;font-size:15px;color:var(--ink2);padding:8px 16px;border:1px solid rgba(255,255,255,.14);border-radius:999px}
@keyframes grslide{to{transform:translateX(-50%)}}
.money-grid{margin-top:clamp(20px,3vw,36px)}
.settle-card{margin:0;padding:clamp(18px,2.2vw,28px);border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#0E1316}
.st-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.st-title{font-size:20px;font-weight:500;letter-spacing:-.01em}.st-games{font-size:13.5px;color:var(--ink3)}
.st-results{margin-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.st-results p{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:15px;color:var(--ink2)}
.st-results b{font-weight:500;color:var(--ink)}
.st-net{margin-top:16px;display:grid;gap:10px}
.st-row{display:grid;grid-template-columns:3.2em 1fr 4em;align-items:center;gap:12px;font-size:15px}
.st-row i{height:12px;border-radius:4px;width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.st-row.gain i{background:var(--good)}.st-row.loss i{background:var(--bad)}
.held .st-row i{width:var(--w)}
.held .st-row:nth-child(2) i{transition-delay:.15s}.held .st-row:nth-child(3) i{transition-delay:.3s}.held .st-row:nth-child(4) i{transition-delay:.45s}
.st-row b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.st-row.gain b{color:var(--good)}.st-row.loss b{color:var(--bad)}
.st-pay{margin-top:14px;font-size:13.5px;color:var(--ink3)}

/* Your record against them: head to head, course by course */
.h2h-card{margin:0;padding:clamp(18px,2.2vw,28px);border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#0E1316}
.h2h-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.h2h-p{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500}
.h2h-p:last-child{flex-direction:row-reverse;justify-content:flex-start}   /* reversed: "start" is the right edge */
.h2h-p i{font-style:normal;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#232B31;font-weight:600;font-size:14px}
.h2h-p.you i{background:var(--data);color:#0B0F12}
.h2h-tally{font-size:clamp(34px,3.4vw,48px);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.h2h-rows{margin-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.h2h-row{display:grid;grid-template-columns:3em 1fr 3em;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:15px;color:var(--ink3);text-align:center}
.h2h-row b{font-size:20px;font-weight:500;color:var(--ink3);font-variant-numeric:tabular-nums}
.h2h-row.w-a b:first-child,.h2h-row.w-b b:last-child{color:var(--ink)}
.h2h-row.w-a b:first-child{color:var(--data)}
.js .h2h-row{opacity:.12;transition:opacity .45s ease}
.js .h2h-row.on{opacity:1}
.h2h-cap{margin-top:12px;font-size:13.5px;color:var(--ink3)}

/* King of the Hole: the course's eighteen crowns; the 7th changes hands */
.kh-card{margin:0;padding:clamp(18px,2.2vw,26px);border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#0E1316}
.kh-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.kh-title{font-size:18px;font-weight:500}.kh-mine{font-size:14px;color:var(--ink3)}.kh-mine b{font-size:18px;color:var(--amber);font-variant-numeric:tabular-nums}
.kh-tiles{list-style:none;padding:0;margin-top:14px;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;perspective:600px}
.kh-tile{display:grid;grid-template-columns:1fr auto;grid-template-areas:"hole crown" "par par" "who sc";align-items:center;padding:8px 9px;border-radius:10px;background:#151B20;border:1px solid rgba(255,255,255,.05);transition:transform .35s ease,background .4s,border-color .4s}
.kh-hole{grid-area:hole;font-size:15px;font-weight:600}
.kh-par{grid-area:par;font-size:11px;color:var(--ink3)}
.kh-crown{grid-area:crown;font-size:14px;color:rgba(255,255,255,.28)}
.kh-who{grid-area:who;font-size:12.5px;font-weight:500;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kh-sc{grid-area:sc;font-size:12.5px;font-weight:600;color:var(--ink3);font-variant-numeric:tabular-nums}
.kh-tile.yours{background:rgba(255,179,0,.08);border-color:rgba(255,179,0,.4)}
.kh-tile.yours .kh-crown{color:var(--amber)}.kh-tile.yours .kh-who{color:var(--amber)}
.kh-tile.flip{transform:rotateY(90deg)}
.kh-tile.stolen{box-shadow:0 0 0 2px var(--amber),0 0 24px rgba(255,179,0,.35)}
.kh-news{margin-top:12px;font-size:14px;color:var(--amber);opacity:0;transition:opacity .5s ease .3s}
.kh-card.told .kh-news{opacity:1}
.no-js .kh-news,html:not(.js) .kh-news{opacity:1}

/* Tournaments: the real Bonanza boards on a clubhouse TV, the results on a phone in front */
.tn-stage{margin:0;position:relative;padding-bottom:clamp(40px,5vw,70px)}
.tn-tv{padding:clamp(8px,1vw,12px);border-radius:14px;background:#050708;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.tn-screen{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:4px;background:#0C1014}
.tn-screen{container-type:inline-size}   /* cq units measure the NEAREST container above an element, so the font-size goes on the boards */
/* the boards are drawn (a made-up event, never real names: Alex 2026-09-23); sizes in em follow the screen's width */
.tn-board{position:absolute;inset:0;padding:4.5% 5% 0;opacity:0;transition:opacity .9s ease;font-size:2.1cqw;line-height:1.25;font-variant-numeric:tabular-nums}
.tn-board.on{opacity:1}
/* Virtual trophies: the Bonanza's real trophy, and the notification the winners get, which slides in at the pause */
.tr-stage{position:relative;margin:0}
.tr-stage img{width:100%;height:auto;   /* no frame: a circle around the trophy, fading fast into the page (Alex); 32% of the 1408x768 photo's width = 58.7% of its height, so the club and the ball stay inside */
  -webkit-mask-image:radial-gradient(ellipse 32% 58.7% at 50% 46%,#000 84%,transparent 100%);
          mask-image:radial-gradient(ellipse 32% 58.7% at 50% 46%,#000 84%,transparent 100%)}
.tr-note{position:absolute;left:2%;top:-4%;   /* top left: the club tip is lower, the ball is top right */
  display:flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:14px;
  background:rgba(20,27,32,.94);border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 40px rgba(0,0,0,.5);
  transition:opacity .6s ease .6s,transform .6s cubic-bezier(.2,.8,.2,1) .6s}
.js .hold-pin:not(.held) .tr-note{opacity:0;transform:translateY(-12px);transition:none}   /* without JavaScript it simply shows */
.tr-cup{width:30px;height:30px;padding:6px;border-radius:50%;background:rgba(255,179,0,.16);fill:var(--amber);flex:none}
.tr-note span{display:flex;flex-direction:column;font-size:14px;color:var(--ink2);line-height:1.3}
.tr-note b{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.part-copy .tr-real{margin-top:14px;font-size:14px;color:var(--ink3)}
@media(prefers-reduced-motion:reduce){.tr-note{transition:none}}
.tn-stand{width:22%;height:14px;margin:0 auto;background:linear-gradient(#0a0d0f,#050708);border-radius:0 0 8px 8px}
.tb-head{display:flex;align-items:center;gap:.7em}.tb-head b{font-size:2em;font-weight:700;letter-spacing:-.02em}
.tb-final{padding:.15em .6em;border-radius:99em;background:#fff;color:#0b0f12;font-size:.8em;font-weight:700}
.tb-sub{margin-top:.2em;padding-bottom:.7em;border-bottom:.12em solid var(--data);color:#a6b1b7;font-size:.95em}
.tb-chips{display:flex;gap:.5em;margin:.9em 0 .5em}
.tb-chips span{padding:.2em .8em;border-radius:99em;border:1px solid rgba(255,255,255,.18);font-size:.8em;color:#a6b1b7}
.tb-chips span.on{border-color:var(--data);color:var(--data);background:rgba(47,191,107,.08)}
.tb-th,.tb-tr,.tb-match{margin-right:22%}   /* the phone stands in front of the TV's right side */
.tb-th,.tb-tr{display:grid;grid-template-columns:3.5em 1fr 4em 4em;align-items:center}
.tb-th{padding:.4em 0;font-size:.8em;letter-spacing:.1em;text-transform:uppercase;color:#8b979e}
.tb-th span:nth-child(n+3),.tb-tr>*:nth-child(n+3){text-align:right}
.tb-tr{padding:.42em 0;border-top:1px solid rgba(255,255,255,.07);font-size:1.25em;font-weight:600}
.tb-tr span:first-child{color:#a6b1b7;font-weight:500}.tb-tr b{color:var(--bad);font-weight:600}
.tb-cup{width:.9em;height:.9em;margin-left:.3em;vertical-align:-.1em;fill:var(--amber)}
.tb-match{display:grid;grid-template-columns:1fr 7em 1fr;align-items:center;gap:.6em;margin-top:.7em;padding:1em 1.2em;border-radius:.6em;background:#141b20;font-size:1.2em}
.tb-match em{font-style:normal;text-align:center;font-size:.8em;color:#a6b1b7}
.tb-match span:last-child{text-align:right}.tb-match .w{color:var(--good);font-weight:600}
.tn-phone{container-type:inline-size;position:absolute;right:-2%;bottom:0;width:27%;padding:6px;border-radius:22px;background:#050708;border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.tp-screen{container-type:inline-size;aspect-ratio:9/17;border-radius:16px;overflow:hidden;background:#f5f7f8;color:#15191c;padding:10% 7%;font-size:7cqw;line-height:1.3}
.tp-h{display:block;margin:.9em 0 .5em;font-size:.72em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#56626a}
.tp-h:first-child{margin-top:0}
.tp-tabs{display:flex;gap:1em;margin-bottom:.3em;font-size:.85em;color:#56626a;border-bottom:1px solid #dfe4e7}
.tp-tabs span{padding-bottom:.35em}.tp-tabs .on{color:#0a7f8f;font-weight:600;box-shadow:0 2px 0 #0a7f8f}
.tp-row,.tp-prize{display:flex;align-items:center;gap:.6em;padding:.45em 0;border-bottom:1px solid #e6eaec;font-size:.92em;font-weight:600}
.tp-row span{width:1em;color:#56626a;font-weight:500}.tp-row b{margin-left:auto;color:#d93c33}
.tp-prize{font-weight:500;font-size:.85em}.tp-prize b{margin-left:auto;font-weight:600}

/* A season: the league table (shares the leaderboard's look) */
.lg-week{font-size:14px;color:var(--ink3)}.lg-week b{color:var(--ink);font-weight:600}
.lg-rows .lb-row{grid-template-columns:2.2em 1fr auto auto;padding:9px 14px}
.lg-gain{font-size:13px;font-weight:600;color:var(--good);opacity:0;transition:opacity .4s ease}
.gains .lg-gain{opacity:1}
@media(prefers-reduced-motion:reduce){.gr-track{animation:none}.lb-live i{animation:none}.st-row i,.tn-board,.kh-tile,.h2h-row{transition:none!important}}
@media(max-width:760px){
  .kh-tiles{grid-template-columns:repeat(3,1fr)}
  .lb-row{grid-template-columns:2em 32px 1fr auto;gap:10px}.lb-flash{display:none}.lb-av{width:32px;height:32px}
  .tn-phone{width:30%;right:0}
}

/* The group's size is whatever the words leave (Alex: beside them, not below): the screen, less the words' left
   margin, less the "On the range … With your friends." line (30.4 times its font size), less a 64px gap and the right
   margin, over the group's 72em. Under 1100px wide it moves below the buttons instead. */
/* The hero HOLDS while the devices come out (Alex, 2026-09-23): wide screens, with JavaScript and motion only. The hero
   sticks for one screen of scrolling (.hero-pause); devices.js lifts it when it is taller than the screen, so its
   bottom stays in view. Everywhere else the pause is not there and the page scrolls as normal. */
.hero-pause{display:none}
@media(min-width:1101px) and (prefers-reduced-motion:no-preference){
  .js .hero-hold .hero{position:sticky;top:0}
  .js .hero-pause{display:block;height:100vh}
}

/* ---------- hero devices: a laptop, an iPhone and an Apple Watch (index.html, devices.js; Alex 2026-09-23) ---------- */
/* Every size inside is in em, so the whole group scales from the one font-size on .devices. The .pre class is the
   state before each screen's entrance (devices.js removes it); without JavaScript nothing is .pre. */
.devices{position:absolute;right:clamp(12px,1.5vw,36px);bottom:clamp(92px,13vh,132px);width:72em;height:31em;font-size:clamp(6px,calc((100vw - clamp(20px,5vw,72px) - 30.4 * clamp(16px,1.35vw,18.5px) - 64px - clamp(12px,1.5vw,36px)) / 72),12.5px);
  
  line-height:1.25;color:#fff;pointer-events:none;z-index:0;font-variant-numeric:tabular-nums}
.devices::before{content:"";position:absolute;left:2em;right:-1em;bottom:-2.2em;height:4em;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0));filter:blur(.3em)}
.devices div,.devices span{min-width:0}

/* the laptop */
.dv-laptop{position:absolute;right:1.5em;bottom:.4em;width:51em}
/* The iPhone and the Watch start hidden behind the laptop and come out to either side of it as the page scrolls
   (Alex, 2026-09-23): devices.js sets --out from 0 (behind) to 1 (beside); without it, they are simply beside it.
   All three share one centre line. The laptop's middle is .6 + 29.75/2 = 15.475em up, so the phone (29em) sits
   .975em up and the Watch (12em) 9.475em up. Out, each stands 2em from the screen (Alex: close, not spread out);
   behind the laptop, the phone travels 18em and the Watch 14em. */
.dv-laptop{right:8.5em;bottom:.6em;z-index:2}
.dv-phone,.dv-watch{z-index:1!important;will-change:transform}
.dv-phone{transform:translateX(calc((1 - var(--out,1)) * 18em)) scale(calc(.9 + .1 * var(--out,1)))}
.dv-watch{transform:translateX(calc((1 - var(--out,1)) * -14em)) scale(calc(.9 + .1 * var(--out,1)))}
.dv-lid{position:relative;width:44em;height:28.6em;margin:0 auto;padding:1em .75em .85em;background:#0a0b0d;border-radius:1.3em 1.3em .35em .35em;
  box-shadow:inset 0 0 0 .13em #43474d,0 1.6em 3.2em rgba(0,0,0,.5)}
.dv-lid::before{content:"";position:absolute;top:.38em;left:50%;width:.3em;height:.3em;margin-left:-.15em;border-radius:50%;background:#23272c}
.dv-screen{width:100%;height:100%;border-radius:.2em;overflow:hidden;background:#0d1317;display:flex;flex-direction:column}
.dv-base{position:relative;height:1.15em;background:linear-gradient(180deg,#d4d8dc 0%,#a2a7ad 45%,#6b7076 100%);border-radius:.2em .2em 1.4em 1.4em/.2em .2em 1em 1em;
  box-shadow:0 1.2em 2.4em rgba(0,0,0,.55)}
.dv-base i{position:absolute;left:50%;top:0;width:7.5em;height:.45em;margin-left:-3.75em;border-radius:0 0 .6em .6em;background:#8b9096}

.lt-bar{flex:none;height:1.9em;display:flex;align-items:center;gap:.38em;padding:0 .8em;background:#1a2025;border-bottom:1px solid rgba(255,255,255,.06)}
.lt-bar>i{width:.62em;height:.62em;border-radius:50%;background:#ff5f57}
.lt-bar>i:nth-child(2){background:#febc2e}.lt-bar>i:nth-child(3){background:#28c840}
.lt-url{margin:0 auto;padding:.22em 3em;border-radius:.45em;background:#0e1316;font-size:.7em;color:#9aa6ad}
.lt-page{flex:1;min-height:0;display:flex;flex-direction:column;gap:.9em;padding:1.1em 1.4em 1em;
  background:radial-gradient(ellipse 70% 60% at 22% 0%,rgba(47,191,107,.09),rgba(47,191,107,0)),#0d1317}
.lt-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1em}
.lt-kick{display:flex;align-items:center;gap:.7em;font-size:.7em;color:#8b979e}
.lt-final{padding:.18em .7em;border-radius:99em;background:rgba(74,222,128,.16);color:var(--good);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.lt-title{margin-top:.2em;font-size:1.85em;font-weight:600;line-height:1.1;letter-spacing:-.02em}
.lt-meta{margin-top:.4em;font-size:.74em;color:#a6b1b7}
.lt-tv{font-size:.74em;font-weight:600;color:var(--data);white-space:nowrap}
.lt-body{flex:1;min-height:0;display:grid;grid-template-columns:1.3fr 1fr;gap:1.2em}
.lt-main{display:flex;flex-direction:column;min-height:0}
.lt-h{font-size:.64em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8b979e}
.lt-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:.45em;align-items:end;height:10.6em;margin-top:.3em}
.pd{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center}
.pd-cup{width:1.5em;height:1.5em;fill:var(--amber);margin-bottom:.15em;filter:drop-shadow(0 0 .5em rgba(255,179,0,.45))}
.pd-team{font-size:.8em;font-weight:600;white-space:nowrap}
.pd-score{margin:.1em 0 .3em;font-size:.78em;font-weight:600;color:var(--bad)}
.pd-block{width:100%;height:var(--h);overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:.1em;padding-top:.45em;border-radius:.5em .5em 0 0;
  transition:height .9s cubic-bezier(.2,.8,.2,1),padding .9s}
.pd-block b{font-size:1.4em;font-weight:700;line-height:1}
.pd-won{font-size:.9em;font-weight:700}
.p1 .pd-block{--h:6.3em;background:linear-gradient(180deg,rgba(255,179,0,.6),rgba(255,179,0,.1));box-shadow:inset 0 1px 0 rgba(255,220,120,.7)}
.p1 .pd-won{font-size:1.05em}
.p2 .pd-block{--h:4.7em;background:linear-gradient(180deg,rgba(201,209,214,.42),rgba(201,209,214,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.p3 .pd-block{--h:3.5em;background:linear-gradient(180deg,rgba(214,140,70,.5),rgba(214,140,70,.07));box-shadow:inset 0 1px 0 rgba(240,180,120,.6)}
.pd-cup,.pd-team,.pd-score{transition:opacity .5s ease .7s}
.devices.pre .pd-block{height:0;padding-top:0}
.devices.pre .pd-cup,.devices.pre .pd-team,.devices.pre .pd-score{opacity:0;transition-delay:0s}
.p2 .pd-block,.p2 .pd-team,.p2 .pd-score{transition-delay:.2s}
.p1 .pd-block{transition-delay:.4s}.p1 .pd-cup,.p1 .pd-team,.p1 .pd-score{transition-delay:1.1s}
.lt-rows{list-style:none;padding:0;margin-top:.45em;border-top:1px solid rgba(255,255,255,.08)}
.lt-rows li{display:flex;align-items:center;gap:.8em;padding:.32em .15em;font-size:.76em;color:#dfe5e8;border-bottom:1px solid rgba(255,255,255,.05)}
.lt-rows span{width:1.7em;color:#8b979e}.lt-rows b{margin-left:auto;font-weight:600;color:var(--bad)}
.lt-side{display:flex;flex-direction:column;min-height:0;padding:.7em .85em;background:#141b20;border:1px solid rgba(255,255,255,.07);border-radius:.7em}
.lt-tabs{display:flex;gap:1em;padding-bottom:.5em;font-size:.68em;color:#8b979e;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.08)}
.lt-tabs span{position:relative;transition:color .4s}
.lt-tabs span.on{color:#fff}
.lt-tabs span::after{content:"";position:absolute;left:0;right:0;bottom:-.75em;height:2px;background:var(--data);transform:scaleX(0);transition:transform .4s}
.lt-tabs span.on::after{transform:none}
.lt-panels{position:relative;flex:1;margin-top:.35em}
.lt-panel{position:absolute;inset:0;list-style:none;padding:0;opacity:0;transform:translateY(.5em);transition:opacity .5s,transform .5s}
.lt-panel.on{opacity:1;transform:none}
.lt-panel li{position:relative;display:flex;align-items:center;gap:.6em;padding:.36em 0;font-size:.74em;color:#dfe5e8;border-bottom:1px solid rgba(255,255,255,.05)}
.lt-panel li span{flex:none;width:3.6em;color:#8b979e}
.lt-panel li b{margin-left:auto;font-weight:600;color:var(--good)}
.lt-panel:nth-child(2) li b{color:var(--data)}
.lt-panel.pay li{padding-left:.5em}
.lt-panel.pay li::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:calc(var(--w) * .7);border-radius:.3em;background:rgba(74,222,128,.13);
  transform-origin:left;transition:transform .8s cubic-bezier(.2,.8,.2,1) .15s}
.lt-panel.pay:not(.on) li::before{transform:scaleX(0);transition-delay:0s}

/* the iPhone */
.dv-phone{position:absolute;left:0;bottom:.975em;z-index:2;width:14em;height:29em;padding:.42em;border-radius:2.3em;background:#16181b;
  box-shadow:inset 0 0 0 .12em #5a5f66,inset 0 0 0 .3em #0d0e10,0 1.8em 3.2em rgba(0,0,0,.6)}
.dv-glass{position:relative;width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;padding:0 .65em;border-radius:1.9em;background:#0B0F12}
.dv-glass::after{content:"";position:absolute;left:50%;bottom:.35em;width:4.6em;height:.2em;margin-left:-2.3em;border-radius:1em;background:rgba(255,255,255,.55)}
.ph-status{flex:none;height:2.2em;display:flex;align-items:center;justify-content:space-between;padding:0 .55em}
.ph-status>span:first-child{font-size:.6em;font-weight:600}
.ph-island{width:4em;height:1.15em;border-radius:1em;background:#000}
.ph-icons{display:flex;gap:.18em;align-items:flex-end}
.ph-icons i{width:.28em;height:.5em;border-radius:.06em;background:#fff}
.ph-icons i:nth-child(2){height:.62em}.ph-icons i:nth-child(3){width:.9em;height:.44em;border-radius:.14em;margin-left:.15em}
.ph-nav{flex:none;height:1.8em;display:flex;align-items:center;justify-content:space-between;padding:0 .15em}
.ph-nav b{font-size:.66em;font-weight:600}.ph-nav span{font-size:.7em;color:#9aa6ad}
.ph-media{display:flex;align-items:center;gap:.4em;margin-top:.15em}
.ph-video{flex:none;display:block;width:7.4em;height:9.25em;border-radius:.6em;background:#1b2126}
.ph-radar{flex:none;width:4.9em;height:4.9em;overflow:visible}
.rd-ring{fill:none;stroke:rgba(255,255,255,.15);stroke-width:.9}
.rd-shape{transition:transform 1.2s cubic-bezier(.2,.8,.2,1) .3s}
.rd-shape polygon{fill:rgba(47,191,107,.22);stroke:var(--data);stroke-width:1.6;stroke-linejoin:round}
.devices.pre-ph .rd-shape{transform:scale(0);transition:none}
.ph-card{background:#151b1f;border:1px solid rgba(255,255,255,.06);border-radius:.8em}
.ph-score{display:flex;align-items:center;gap:.55em;margin-top:.5em;padding:.55em}
.ph-ring{position:relative;flex:none;width:4.1em;height:4.1em;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:conic-gradient(rgba(74,222,128,.75) calc(var(--p) * 1%),rgba(255,255,255,.09) 0)}
.ph-ring::before{content:"";position:absolute;inset:.3em;border-radius:50%;background:#151b1f}
.ph-num,.ph-ring small{position:relative}
.ph-num{font-size:1.4em;font-weight:700;line-height:1;color:#74e6ad}
.ph-ring small{display:block;font-size:.46em;color:#8b979e}
.ph-band{display:inline-block;padding:.1em .5em;font-size:.52em;font-weight:600;color:#74e6ad;border:1px solid rgba(74,222,128,.5);border-radius:.45em}
.ph-verdict>div{margin-top:.35em;font-size:.53em;line-height:1.35;color:#c9d1d6}
.ph-h{margin:1.3em 0 .7em;font-size:.52em;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--data)}
.ph-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.3em}
.ph-tiles>div{padding:.35em .4em;background:#151b1f;border:1px solid rgba(255,255,255,.06);border-radius:.5em;transition:opacity .5s,transform .5s}
.ph-tiles span{display:block;font-size:.42em;color:#8b979e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-tiles b{display:block;margin-top:.05em;font-size:.95em;font-weight:700}
.ph-tiles .tour b{color:var(--good)}.ph-tiles .good b{color:#74e6ad}.ph-tiles .warn b{color:#FFD23F}.ph-tiles .bad b{color:var(--bad)}
.devices.pre-ph .ph-tiles>div{opacity:0;transform:translateY(.5em);transition:none}
.ph-tiles>div:nth-child(2){transition-delay:.1s}.ph-tiles>div:nth-child(3){transition-delay:.2s}.ph-tiles>div:nth-child(4){transition-delay:.3s}
.ph-tiles>div:nth-child(5){transition-delay:.4s}.ph-tiles>div:nth-child(6){transition-delay:.5s}

/* the Watch */
.dv-watch{position:absolute;right:0;bottom:9.475em;z-index:3;width:10em;height:12em}
.wt-band{position:absolute;left:1.4em;right:1.4em;height:5.2em;background:linear-gradient(90deg,#1c1f22,#2d3135 50%,#1c1f22)}
.wt-band.top{bottom:calc(100% - 1.6em);border-radius:.8em .8em 0 0;-webkit-mask:linear-gradient(0deg,#000 50%,transparent);mask:linear-gradient(0deg,#000 50%,transparent)}
.wt-band.bottom{top:calc(100% - 1.6em);border-radius:0 0 .8em .8em;-webkit-mask:linear-gradient(180deg,#000 45%,transparent);mask:linear-gradient(180deg,#000 45%,transparent)}
.wt-crown{position:absolute;right:-.42em;top:2.9em;width:.6em;height:1.9em;border-radius:.25em;background:linear-gradient(90deg,#666b72,#2b2e32);
  box-shadow:0 3.1em 0 -.05em #3a3e43}
.wt-case{position:absolute;inset:0;padding:.55em;border-radius:2.6em;background:linear-gradient(145deg,#5a5f66,#1c1e21 45%,#34383c);
  box-shadow:inset 0 0 0 .1em rgba(255,255,255,.14),0 1.4em 2.6em rgba(0,0,0,.6)}
.wt-screen{position:relative;width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12em;
  padding-top:1.1em;border-radius:2.1em;background:#000}
.wt-screen>span{white-space:nowrap}
.wt-time{position:absolute;top:1.25em;right:1.9em;font-size:.66em;font-weight:600}
.wt-head{font-size:.62em;font-weight:700}
.wt-yds{font-size:3.3em;font-weight:700;line-height:.95;letter-spacing:-.02em;color:var(--amber);transition:opacity .35s}
.wt-plays{font-size:.64em;font-weight:600}
.wt-plays i{font-style:normal;font-weight:800;color:#FF9500}.wt-plays em{font-style:normal;font-weight:800}
.wt-fcb{font-size:.58em;color:#dfe5e8}
.wt-screen.fade>span{opacity:0;transition:opacity .35s}

@media(prefers-reduced-motion:reduce){.devices *{transition:none!important}}
/* narrower screens: the group sits under the buttons, the same picture at the page's width */
@media(max-width:1100px){
  .hero-copy{padding-bottom:40px}   /* the devices below the buttons carry their own space */
  .devices{position:relative;right:auto;bottom:auto;margin:4.5em 0 2em;font-size:min(calc((100vw - 2 * clamp(20px,5vw,72px)) / 73),11px)}
}
@media(max-width:760px){
  .hero-copy{padding-bottom:24px}
  .devices{font-size:calc((100vw - 32px) / 72.5)}
}

/* ---------- For organizers (/organizers/, Alex 2026-09-23) ---------- */
/* One screen at a time, no pauses. The screens (.mk…) are drawn in code, sized in em from one font-size each. */
.org-hero{padding:clamp(48px,8vh,96px) 0 clamp(24px,4vh,48px);background:radial-gradient(ellipse 60% 70% at 85% 30%,rgba(47,191,107,.07),rgba(47,191,107,0))}
.org-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,4vw,72px);align-items:center}
.org-hero .statement{font-size:clamp(38px,4.4vw,64px)}
.org-lede{margin-top:22px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink2);max-width:31em;text-wrap:pretty}
.org-actions{display:flex;align-items:center;gap:28px;margin-top:34px;flex-wrap:wrap}
.org-actions.center{justify-content:center}
.org-fine{margin-top:20px;font-size:14px;color:var(--ink3)}
.org-sec{padding:clamp(28px,5vh,56px) 0}
.org-sec .subhead{margin-top:0}
.org h3{font-size:clamp(18px,1.5vw,21px);font-weight:600;letter-spacing:-.01em}
.org-who,.org-grid{display:grid;gap:18px;margin-top:32px}
.org-who{grid-template-columns:repeat(4,minmax(0,1fr))}
.org-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.org-who>div,.org-grid>div{padding:24px;border-radius:16px;background:#12181c;border:1px solid rgba(255,255,255,.07)}
.org-who>div{border-top:2px solid var(--data)}
.org-who p,.org-grid p{margin-top:10px;font-size:16px;line-height:1.5;color:var(--ink2)}

/* the old way / with CaddieLAB */
.org-vs{margin-top:32px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.vs-head,.vs-row{display:grid;grid-template-columns:1fr 1fr}
.vs-head span{padding:14px 24px;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);background:#12181c}
.vs-head span+span{color:var(--data)}
.vs-row span{padding:18px 24px;font-size:17px;line-height:1.45;border-top:1px solid rgba(255,255,255,.07)}
.vs-row span:first-child{color:var(--ink3);text-decoration:line-through;text-decoration-color:rgba(255,90,79,.55);text-decoration-thickness:1px}
.vs-row span+span{color:var(--ink);background:rgba(47,191,107,.035);border-left:1px solid rgba(255,255,255,.07)}

/* the console, mid-event */
.mk{font-size:clamp(7px,.72vw,11px);line-height:1.3;color:#fff;font-variant-numeric:tabular-nums}
.mk-console{border-radius:1em;overflow:hidden;background:#0d1317;border:1px solid rgba(255,255,255,.1);box-shadow:0 3em 6em rgba(0,0,0,.55)}
.mk-console .lt-bar{height:2.4em}
.mk-console .lt-url{font-size:.85em}
.cn{display:grid;grid-template-columns:12em 1fr;min-height:32em}
.cn-side{display:flex;flex-direction:column;gap:1.1em;padding:1.6em 1.3em;background:#0a0f12;border-right:1px solid rgba(255,255,255,.07);font-size:1em;color:#a6b1b7}
.cn-side span.on{color:#fff}
.cn-brand{font-size:1.05em;margin-bottom:.6em;color:#fff;white-space:nowrap}.cn-brand span{color:var(--data)}
.cn-main{padding:1.4em 1.8em;min-width:0}
.cn-back{font-size:.9em;color:var(--data)}
.cn-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1em;margin-top:.6em}
.cn-title{display:flex;align-items:center;gap:.6em;font-size:1.7em;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.cn-meta{margin-top:.35em;font-size:.92em;color:#a6b1b7}
.cn-btn{flex:none;padding:.6em 1.1em;border-radius:99em;background:var(--amber);color:#14100a;font-weight:600;font-size:.95em}
.cn-live{display:inline-flex;align-items:center;gap:.4em;padding:.2em .65em;border-radius:99em;background:rgba(74,222,128,.15);color:var(--good);font-size:.5em;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cn-live i{width:.6em;height:.6em;border-radius:50%;background:var(--good);animation:org-pulse 1.8s ease-in-out infinite}
@keyframes org-pulse{50%{opacity:.25}}
.cn-tabs{display:flex;gap:1.4em;margin-top:1.3em;padding-bottom:.7em;border-bottom:1px solid rgba(255,255,255,.08);font-size:.95em;color:#a6b1b7;white-space:nowrap;overflow:hidden}
.cn-tabs .on{color:var(--data);box-shadow:0 .75em 0 -.62em var(--data)}
.cn-cards{position:relative;display:flex;gap:1.6em;margin-top:1.2em;padding:.8em 1em 1.1em;border-radius:.6em;background:#141b20;font-size:.95em;color:#a6b1b7}
.cn-cards b{color:#fff}
.cn-cards i{position:absolute;left:1em;right:1em;bottom:.5em;height:.25em;border-radius:1em;background:rgba(255,255,255,.08)}
.cn-cards i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:1em;background:var(--data)}
.cn-table{margin-top:1.1em;border-radius:.6em;background:#141b20;padding:.4em 1em}
.cn-th,.cn-tr{display:grid;grid-template-columns:2.6em 1fr 4em 4em;align-items:center}
.cn-th{padding:.6em 0;font-size:.8em;letter-spacing:.1em;text-transform:uppercase;color:#8b979e}
.cn-th span:first-child{grid-column:1/3}
.cn-th span:not(:first-child),.cn-tr>*:nth-child(n+3){text-align:right}
.cn-tr{padding:.62em 0;border-top:1px solid rgba(255,255,255,.06);font-size:1.02em}
.cn-tr span:first-child{color:#8b979e}.cn-tr span:nth-child(3){color:#a6b1b7}
.cn-tr b{color:var(--bad);font-weight:600}

/* the cart sign and the phone scoring in the browser */
.org-show{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px)}
.org-fig figcaption{margin-top:22px;font-size:17px;line-height:1.5;color:var(--ink2);max-width:34em}
.org-fig figcaption b{color:var(--ink);font-weight:600}
.mk-cart,.mk-tv{font-size:clamp(7px,.72vw,11px);line-height:1.3;height:31em;display:flex;align-items:center;justify-content:center;gap:3em;border-radius:16px;
  background:radial-gradient(ellipse at 50% 100%,rgba(74,222,128,.08),rgba(74,222,128,0) 70%),#10161a;border:1px solid rgba(255,255,255,.07);color:#fff}
.cart-sign{width:15em;padding:1.6em 1.4em;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:.8em;background:#f4f1ea;color:#15191c;
  box-shadow:0 2em 3em rgba(0,0,0,.5);transform:rotate(-3deg)}
.cs-event{font-size:.85em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#56626a}
.cs-cart{margin-top:.2em;font-size:2.6em;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.cs-team{font-size:.95em;color:#39434a}
.cs-qr{width:9em;height:9em;margin:1em 0 .7em}.cs-qr path{fill:#15191c}
.cs-scan{font-size:1em;font-weight:600}
.web-phone{width:13em;height:26em;padding:.4em;border-radius:2.1em;background:#16181b;box-shadow:inset 0 0 0 .12em #5a5f66,0 2em 3em rgba(0,0,0,.55);flex:none}
.wp-glass{height:100%;border-radius:1.75em;background:#0B0F12;display:flex;flex-direction:column;align-items:center;padding:1.2em .9em;text-align:center}
.wp-url{padding:.25em .8em;border-radius:.5em;background:#1a2025;font-size:.72em;color:#9aa6ad}
.wp-hole{margin-top:1.6em;font-size:.85em;color:#a6b1b7}
.wp-team{margin-top:.3em;font-size:1.25em;font-weight:600}
.wp-step{display:flex;align-items:center;gap:1em;margin-top:1.1em}
.wp-step i{width:2.4em;height:2.4em;border-radius:50%;display:grid;place-content:center;font-style:normal;font-size:1.1em;background:#1d252b;color:#dfe5e8}
.wp-step b{font-size:3.4em;font-weight:700;line-height:1}
.wp-tag{margin-top:.6em;padding:.15em .7em;border-radius:99em;background:rgba(255,90,79,.16);color:var(--bad);font-size:.8em;font-weight:600}
.wp-save{margin-top:auto;font-size:.75em;color:var(--good)}
.wp-next{margin-top:.7em;width:100%;padding:.75em;border-radius:.8em;background:var(--amber);color:#14100a;font-weight:600;font-size:.9em}

/* the clubhouse TV */
.mk-tv{flex-direction:column;gap:0}
.tv-screen{width:38em;aspect-ratio:16/9;padding:1.4em 1.8em 0;display:flex;flex-direction:column;border-radius:.5em;background:#0b0f12;border:.45em solid #050607;
  box-shadow:0 2em 3em rgba(0,0,0,.55);overflow:hidden}
.tv-head{display:flex;align-items:center;gap:.8em}.tv-head b{font-size:1.6em;font-weight:700;letter-spacing:-.02em}
.tv-head .cn-live{font-size:.6em}
.tv-sub{margin-top:.2em;padding-bottom:.6em;border-bottom:.15em solid var(--data);font-size:.85em;color:#a6b1b7}
.tv-rows{flex:1;display:flex;flex-direction:column;justify-content:space-around;padding:.4em 0}
.tv-rows div{display:grid;grid-template-columns:2.4em 1fr 3em 3em;align-items:center;font-size:1.15em;font-weight:600}
.tv-rows span{color:#8b979e;font-weight:500}.tv-rows em{font-style:normal;text-align:right;color:#a6b1b7;font-weight:500}
.tv-rows b{text-align:right;color:var(--bad)}
.tv-ticker{margin:0 -1.8em;padding:.45em 1.8em;display:flex;gap:2.4em;white-space:nowrap;background:rgba(47,191,107,.1);font-size:.8em;color:#dfe5e8;overflow:hidden}
.tv-ticker span::before{content:"●";margin-right:.6em;color:var(--data);font-size:.7em;vertical-align:.15em}
.tv-sponsor{margin:0 -1.8em;padding:.4em 1.8em;background:#070a0c;font-size:.7em;color:#8b979e;text-align:center}
.tv-stand{width:9em;height:1.4em;margin-top:-.1em;background:linear-gradient(#1c1f22,#0c0e10);clip-path:polygon(35% 0,65% 0,100% 100%,0 100%)}

/* how it works */
.org-steps{list-style:none;padding:0;margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:st}
.org-steps li{counter-increment:st;padding:24px;border-radius:16px;background:#12181c;border:1px solid rgba(255,255,255,.07);font-size:16.5px;line-height:1.5;color:var(--ink2)}
.org-steps li::before{content:counter(st);display:grid;place-content:center;width:36px;height:36px;margin-bottom:14px;border-radius:50%;background:rgba(47,191,107,.12);
  color:var(--data);font-weight:600}
.org-steps b{display:block;margin-bottom:4px;font-size:clamp(18px,1.5vw,21px);color:var(--ink);font-weight:600}
.org-close{padding:clamp(56px,10vh,120px) 0;text-align:center}
.org-close .statement{margin:0 auto}

@media(prefers-reduced-motion:reduce){.cn-live i{animation:none}}
@media(max-width:1100px){
  .org-hero-grid{grid-template-columns:1fr}
  .mk-console{font-size:min(1.25vw,10px)}
  .org-who{grid-template-columns:repeat(2,minmax(0,1fr))}
  .org-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .org-show{grid-template-columns:1fr}
  .mk-cart,.mk-tv{font-size:min(1.3vw,10px)}
}
@media(max-width:760px){
  .mk-console{font-size:1.45vw}
  .cn{grid-template-columns:1fr}.cn-side{display:none}
  .org-who,.org-grid,.org-steps{grid-template-columns:1fr}
  .vs-head,.vs-row{grid-template-columns:1fr}
  .vs-head span+span{display:none}
  .vs-row span{padding:14px 18px;font-size:16px}
  .vs-row span:first-child{padding-bottom:4px;border-top:1px solid rgba(255,255,255,.07)}
  .vs-row span+span{border-left:0;border-top:0;padding-top:4px;background:none}
  .vs-row span+span::before{content:"→ ";color:var(--data)}
  .mk-cart,.mk-tv{font-size:2.1vw;gap:1.5em}
  .org-actions{gap:20px}
}

/* ---------- phones (Alex, 2026-09-24: "optimized for mobile", desktop unchanged) ---------- */
@media(max-width:760px){
  /* the footer: the copyright on its own line, the links in a row under it */
  .foot-row{gap:10px 22px}.foot-row>span{flex-basis:100%;margin-right:0}
  /* the range page's charts: a band's label that ends at the right edge reads leftward from it, not off the screen */
  .track[style*="--band-to:100%"] .band b{left:auto;right:6px}
  /* the course page: the Rules Official card shows (empty) from the start, instead of a blank space until its demo */
  .js .rules-demo{opacity:1;transform:none}
  /* After the round: the golfer sits higher in the tall photo than on the other pages, so the words go higher still */
  #after .moment-pin .wrap{margin-bottom:46vh}
  /* the handicap chart is drawn 660 wide and shown ~300: its words need to be bigger to be read */
  .hc-ax{font-size:26px}.hc-index-lab,.hc-today{font-size:28px}
  /* With your friends: the "Today" pop-up would sit on top of the words; the page makes its point without it */
  .feed{display:none}
  /* the trophy's notification sits above the photo, not on the trophy */
  .tr-note{position:relative;left:auto;top:auto;width:fit-content;margin:0 auto 10px}
  /* and the trophy itself larger: the photo is wider than the screen, its faded edges cut off (the circle stays whole) */
  .tr-stage{overflow:hidden;margin:0 -16px}
  .tr-stage img{width:150%;max-width:none;margin-left:-25%}
}

/* ================= Round 3 foundation (Alex, 2026-09-26: keep the animations, redesign how it looks and works) ======
   The site bar is the same on every page: the pages, Log in and the one amber "Get the app". It slides away while you
   scroll down and comes back the moment you scroll up; on the home page it waits until you are past the hero. */
.sitebar{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(11,15,18,.8);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);transition:transform .35s ease,opacity .35s ease}
.sitebar.hide{transform:translateY(-101%)}
.sitebar.on-home.at-hero{transform:translateY(-101%);opacity:0;pointer-events:none}
.sitebar-in{display:flex;align-items:center;gap:28px;height:68px}
.sitebar-links{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:15.5px;color:var(--ink2)}
.sitebar-links a{transition:color .15s ease}
.sitebar-links a:hover,.sitebar-links a:focus-visible{color:var(--ink)}
.sitebar-links a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--data);text-decoration-thickness:2px;text-underline-offset:9px}
.sitebar-login{color:var(--ink);padding-left:28px;border-left:1px solid rgba(255,255,255,.14)}
.sitebar-app{white-space:nowrap}
.sitebar-toggle{display:none;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:none;color:var(--ink);font:500 15px/1 "IBM Plex Sans",system-ui,sans-serif;cursor:pointer}
.sitebar :focus-visible{outline:2px solid var(--data);outline-offset:3px;border-radius:4px}
@media(max-width:960px){
  .sitebar-in{gap:12px;height:60px}
  .sitebar-app{margin-left:auto}
  .sitebar-toggle{display:inline-flex}
  .sitebar-links{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:6px clamp(16px,5vw,72px) 18px;background:var(--bg);border-bottom:1px solid rgba(255,255,255,.1);font-size:21px;color:var(--ink)}
  .sitebar.open .sitebar-links{display:flex}
  .sitebar-links a{padding:15px 0;border-top:1px solid rgba(255,255,255,.07)}
  .sitebar-links a:first-child{border-top:0}
  .sitebar-links a[aria-current]{color:var(--data);text-decoration:none}
  .sitebar-login{padding-left:0;border-left:0}
}
@media(max-width:420px){.sitebar .wordmark i{display:none}}

/* Every section that pauses fills the screen while it holds, its contents centred under the bar: the pause always stops
   in the same place, with the whole section on screen. (A section taller than the screen still holds with its bottom on
   the screen's bottom, so none of it is skipped.) */
.hold-pin{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:84px 44px}
.hold-pin.top{justify-content:flex-start}
.hold-pin > *{width:100%}   /* a .wrap's auto side margins would otherwise shrink it to its content and centre it */

/* Bigger reading sizes: the headline of each part and its words (they were small on a laptop) */
body{font-size:18px}
.wrap{max-width:1200px}
.part-copy h4{font-size:clamp(30px,3.3vw,50px)}
.part-copy p{font-size:clamp(17px,1.35vw,20px);max-width:34em}

/* The end of every moment page hands you on to the next one: its opening photo and its opening line. */
.next-page{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(80svh,680px);margin-top:clamp(64px,8vw,120px);
  padding:0 clamp(16px,5vw,72px) clamp(48px,8vh,96px);overflow:hidden;isolation:isolate}
.next-page img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;z-index:-2;transition:transform 1.4s ease}
.next-page::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(11,15,18,.2) 28%,rgba(11,15,18,.2) 55%,rgba(11,15,18,.88) 100%),
             linear-gradient(90deg,rgba(11,15,18,.7) 0%,rgba(11,15,18,0) 60%)}
.next-kicker,.next-line{max-width:1360px;width:100%;margin:0 auto}
.next-kicker{font-size:17px;font-weight:500;color:var(--data)}
.next-line{margin-top:12px;font-size:clamp(34px,5vw,72px);line-height:1.04;font-weight:500;letter-spacing:-.035em;text-wrap:balance}
.next-line i{font-style:normal;color:var(--data);display:inline-block;transition:transform .25s ease}
.next-page:hover img{transform:scale(1.03)}
.next-page:hover .next-line i,.next-page:focus-visible .next-line i{transform:translateX(10px)}
.next-page:focus-visible{outline:2px solid var(--data);outline-offset:-6px}
main:has(> .next-page:last-child) + .foot{margin-top:0}
@media(prefers-reduced-motion:reduce){.sitebar,.next-page img,.next-line i{transition:none}}

/* ---- Round 3: Meet your caddie, "bigger on black" (Alex, 2026-09-26). The animation is unchanged (caddie.js): the
   number is the centre of the screen, the four reasons sit in a row beneath it (the amount over its reason), and the
   call and its two notes run underneath, centred. ---- */
.caddie-hold .moment-pin{padding-top:clamp(84px,11vh,120px)}
.caddie-hold .caddie-grid:not(.call-grid){grid-template-columns:1fr;justify-items:center;text-align:center;gap:clamp(18px,3.5vh,40px)}
.caddie-hold .caddie-number{display:flex;flex-direction:column;align-items:center}
.caddie-hold .caddie-label{justify-items:center}
.caddie-hold .yardage{margin-top:0;font-size:clamp(120px,min(19vw,29svh),290px)}
.caddie-hold .yardage small{margin-left:.25em}
.caddie-hold .adjust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.5vw,40px);width:100%;max-width:1100px}
.caddie-hold .adjust li{flex-direction:column-reverse;align-items:center;justify-content:flex-end;gap:6px;padding:14px 0 0;border-bottom:0;
  border-top:1px solid rgba(255,255,255,.16);text-align:center;font-size:clamp(14px,1.1vw,16px);line-height:1.35}
.caddie-hold .adjust b{font-size:clamp(28px,2.6vw,40px);letter-spacing:-.02em}
.caddie-hold .call-head{max-width:30em;margin:clamp(30px,6vh,64px) auto 0;text-align:center}
.caddie-hold .call-grid{max-width:1100px;margin-left:auto;margin-right:auto}
@media(max-height:780px) and (min-width:761px){
  .caddie-hold .caddie-grid:not(.call-grid){gap:14px}
  .caddie-hold .adjust li{padding-top:10px}
  .caddie-hold .adjust b{font-size:clamp(24px,2.2vw,32px)}
  .caddie-hold .call-head{margin-top:26px}
}
@media(max-width:760px){
  .caddie-hold .moment-pin{padding-top:76px}
  .caddie-hold .yardage{font-size:clamp(84px,26vw,120px)}
  .caddie-hold .adjust{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
  .caddie-hold .adjust li{padding-top:8px;font-size:13px}
  .caddie-hold .adjust b{font-size:24px}
  .caddie-hold .call-head{margin-top:22px}
}
@media(max-width:760px) and (max-height:720px){
  .caddie-hold .moment-pin{padding-top:66px}
  .caddie-hold .yardage{font-size:clamp(64px,19vw,84px)}
  .caddie-hold .adjust{gap:6px 14px}
  .caddie-hold .adjust li{padding-top:5px;font-size:12px}
  .caddie-hold .adjust b{font-size:20px}
  .caddie-hold .call-head{margin-top:14px}
}

/* ---- Round 3: "Your caddie knows the course, / and your game." (Alex, 2026-09-26: one big line, two big pictures).
   The two captions are headline-sized, so the sentence reads straight across the top; the pictures fill their columns. */
.know-charts{gap:clamp(32px,5vw,88px)}
.know-charts .chart-name{font-size:clamp(24px,2.5vw,40px);line-height:1.08;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.know-charts .know-svg{margin-top:clamp(14px,2.5vh,28px)}
.know-charts .chart p{font-size:clamp(16px,1.2vw,18px);margin-top:14px}
.know-charts .chart-key{margin-top:14px}
@media(max-height:820px) and (min-width:761px){
  .know-charts .chart-name{font-size:clamp(22px,2.3vw,34px)}
  .know-charts .know-svg{max-height:44svh}
  .know-charts .chart p{font-size:15.5px}
}
@media(max-width:760px){.know-charts .chart-name{font-size:26px;white-space:normal}}

/* ---- Round 3: Shot tracking (2026-09-26). On a laptop the hole fills the screen's height on the right and fades into
   the page on the left, the photo-first look of the rest of the site; the headline sits in the dark top-left and the
   three points run along the bottom, clear of the shot's path (tee lower-left, green upper-right). The shots still draw
   the same way. Phones and portrait screens keep the stacked layout. ---- */
@media(min-width:900px) and (min-aspect-ratio:5/4){
  .track-part .hold-pin{height:100vh;height:100svh;min-height:0;padding:0;justify-content:flex-start;overflow:hidden;isolation:isolate}
  .track-part .hold-pin > .wrap:first-child{position:relative;z-index:2;padding-top:clamp(84px,11vh,112px)}
  .track-part .part-grid{display:block;margin-top:clamp(20px,4vh,44px)}
  .track-part .part-copy{max-width:min(560px,40vw)}
  .track-part .part-copy > :not(.part-points){position:relative;z-index:2}   /* the copy stays unpositioned, so the points below are placed against the whole screen */
  .track-part .part-copy h4{font-size:clamp(34px,3.6vw,56px)}
  .track-part :is(.track-map,.zones-map){position:absolute;inset:0;z-index:0}
  .track-part .track-frame{position:absolute;top:0;right:0;height:100%;width:auto;aspect-ratio:1200/896;border-radius:0}
  .track-part .track-frame img{width:100%;height:100%}
  .track-part :is(.track-map,.zones-map)::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,var(--bg) 0%,var(--bg) calc(100% - 100svh * 1.339),rgba(11,15,18,.55) calc(100% - 100svh * 1.339 + 14%),rgba(11,15,18,0) calc(100% - 100svh * 1.339 + 38%)),
      radial-gradient(ellipse 58% 72% at 0% 22%,rgba(11,15,18,.93),rgba(11,15,18,.6) 55%,rgba(11,15,18,0) 100%),
      linear-gradient(180deg,var(--bg) 0%,rgba(11,15,18,0) 16%,rgba(11,15,18,0) 66%,rgba(11,15,18,.9) 88%,var(--bg) 100%)}
  .track-part .part-points{position:absolute;z-index:2;left:0;right:0;bottom:clamp(24px,5vh,56px);max-width:1360px;margin:0 auto;
    padding:0 clamp(16px,5vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);border-top:0}
  .track-part .part-points li{border-bottom:0;border-top:1px solid rgba(255,255,255,.28);padding:14px 0 0;font-size:clamp(15px,1.15vw,17px);color:#d6dde1}
}

/* ---- Round 3: After the round (2026-09-26) ----
   Know where to miss takes Shot tracking's full-screen hole (it is the same aerial); its key sits bottom-left. */
@media(min-width:900px) and (min-aspect-ratio:5/4){
  .zones-part.track-part .zones-grid{grid-template-columns:none}
  .zones-part.track-part .zones-key{position:absolute;z-index:2;left:0;right:0;bottom:clamp(24px,5vh,56px);max-width:1360px;margin:0 auto;
    padding:0 clamp(16px,5vw,72px);font-size:15px;color:#d6dde1}
  .zones-part.track-part .part-copy p{color:#d6dde1}
}
/* The product panels read small on a laptop: on a big enough screen each is drawn larger as a whole (zoom keeps its
   inside layout exactly), and the numbers that carry a section are hero-sized. */
@media(min-width:1200px) and (min-height:800px){
  .sg-card,.hc-card,.notes-card,.fix-plan{zoom:1.18}
  .sc-nine{font-size:16.5px}.sc-nine thead th{font-size:13.5px}
}
.hc-val{font-size:clamp(72px,8.5vw,140px)}
.part-copy .sg-head{font-size:clamp(34px,3.8vw,60px)}

/* ---- Round 3: With your friends (2026-09-26). The same larger panels as After the round; the TV board and the trophy
   get the wider column, since they are the pictures of those sections. ---- */
@media(min-width:1200px) and (min-height:800px){
  .lb-part .lb-card,.lg-card,.settle-card,.h2h-card,.kh-card{zoom:1.16}
  .tn-grid{grid-template-columns:.72fr 1.28fr}
  .tr-part .part-grid{grid-template-columns:.8fr 1.2fr}
}

/* ---- Round 3: On the range (2026-09-26). The two camera views get more of the screen (the swing is the star; the
   numbers between them keep a readable column), and the practice plan row is drawn larger. ---- */
@media(min-width:1200px) and (min-height:800px){
  .scrub-pin{grid-template-columns:minmax(0,1.2fr) minmax(300px,.95fr) minmax(0,1.2fr)}
  .scrub-view canvas{max-width:min(520px,62svh)}
  .plan-flow{zoom:1.18}
}

/* ---- Round 3: pricing (2026-09-26). Each plan's name sits over its price, set large; Member carries a green rule as
   the upgrade. The lists are unchanged. ---- */
.price-cols h4{flex-direction:column;align-items:flex-start;gap:6px;font-size:20px;color:var(--ink2);padding-top:18px;border-top:2px solid rgba(255,255,255,.18)}
.price-cols h4.price-member{border-top-color:var(--data)}
.price-cols h4 span{font-size:clamp(44px,4.6vw,68px);line-height:1;font-weight:500;letter-spacing:-.04em;color:var(--ink)}
.price-cols h4 small{font-size:.32em;font-weight:400;letter-spacing:0;color:var(--ink2)}
.price-alt{text-align:left}
/* the section holds with its headline at the top, so on laptop-height screens it is tightened to fit one screen */
@media(max-height:1000px) and (min-width:761px){
  .pricing .hold-pin{padding-block:60px 22px}
  .pricing .price-cols{margin-top:22px}
  .price-cols h4{padding-top:14px}
  .price-cols h4 span{font-size:clamp(38px,3.6vw,52px)}
  .price-cols li{padding:5px 0;font-size:15.5px}
  .pricing .price-cta{margin-top:18px}
}
@media(max-height:780px) and (min-width:761px){
  .pricing .hold-pin{padding-block:44px 14px}
  .pricing .statement{font-size:clamp(28px,3.4vw,44px)}
  .price-cols h4{font-size:17px;padding-top:10px;gap:2px}
  .price-cols h4 span{font-size:clamp(32px,3vw,40px)}
  .price-alt{margin-top:4px}
  .price-cols li{padding:3px 0;font-size:14.5px}
}

/* ---- Round 3: the organizers page (2026-09-26). No boxes: the audiences and features are columns under a hairline
   (the audiences' in green), and the three steps are a real sequence, so each leads with its number, large. ---- */
.org-who,.org-grid{gap:clamp(28px,3.5vw,56px) clamp(24px,3vw,48px);margin-top:clamp(28px,4vw,48px)}
.org-who>div,.org-grid>div{padding:18px 0 0;border-radius:0;background:none;border:0;border-top:1px solid rgba(255,255,255,.16)}
.org-who>div{border-top:2px solid var(--data)}
.org-who h3,.org-grid h3,.org-who h4,.org-grid h4{font-size:clamp(19px,1.5vw,22px)}
.org-who p,.org-grid p{font-size:clamp(15.5px,1.15vw,17px)}
.org-steps{gap:clamp(24px,3vw,48px)}
.org-steps li{padding:0;border-radius:0;background:none;border:0;font-size:clamp(16px,1.2vw,18px)}
.org-steps li::before{display:block;width:auto;height:auto;margin-bottom:10px;border-radius:0;background:none;
  font-size:clamp(56px,6vw,96px);font-weight:500;line-height:1;letter-spacing:-.04em;color:var(--data);font-variant-numeric:tabular-nums}