/* Club path / Load & Launch section (redesign preview, 24 Oct 2026).
   Colours come from the app's trail palette (ClubTrailPalette): Load 6E32BE -> F078FF,
   Launch FFDC3C -> FF780A, Club path 96F578. The section is near-black so the light reads. */
.cp,.hero-swing{--cp-ground:#050c0a;--cp-violet:#c27bff;--cp-violet-deep:#6e32be;--cp-gold:#ffd23c;--cp-ember:#ff780a;--cp-green:#96f578;--cp-glass:rgba(5,11,9,.62);--cp-line:rgba(240,240,231,.14)}
.cp{position:relative;isolation:isolate;overflow:hidden;background:var(--cp-ground);padding-block:120px 104px;color:var(--ivory)}
.cp-aura{position:absolute;inset:-10% -20% auto;height:1100px;z-index:-1;pointer-events:none;background:radial-gradient(40% 32% at 74% 30%,rgba(110,50,190,.34),transparent 70%),radial-gradient(34% 26% at 86% 62%,rgba(255,170,40,.16),transparent 70%),radial-gradient(50% 40% at 8% 0,rgba(215,237,154,.06),transparent 70%)}
.cp-aura:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(240,240,231,.035) 119px 120px);mask-image:linear-gradient(#000,transparent 85%)}

.cp-head{grid-area:head;max-width:640px}
.cp-head .eyebrow{display:flex;align-items:center;gap:12px;color:#c9d3c4;margin-bottom:26px}
.cp-pro{display:inline-flex;align-items:center;padding:4px 9px 3px;border-radius:999px;color:var(--forest);background:linear-gradient(100deg,var(--cp-violet),var(--cp-gold));letter-spacing:.16em}
.cp-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}
.cp h2 em{background:linear-gradient(100deg,#d9a4ff 0%,var(--cp-violet) 30%,var(--cp-gold) 68%,var(--cp-ember) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.cp-lede{max-width:540px;margin-top:28px;font-size:17px;line-height:1.6;color:#c5cfc1}

/* The stage: the swing, with the trail's own read drawn onto it. */
.cp-hero{display:grid;grid-template-columns:minmax(0,min(540px,64vh)) minmax(0,1fr);grid-template-areas:'stage head' 'stage read';grid-template-rows:auto 1fr;column-gap:clamp(56px,7vw,120px);row-gap:44px;align-items:start}
.cp-stage{grid-area:stage}.cp-read{grid-area:read}
.cp-stage{position:relative;margin:0;aspect-ratio:4/5;border-radius:30px;overflow:hidden;background:#0b1512;box-shadow:0 0 0 1px var(--cp-line),0 50px 120px -30px rgba(110,50,190,.55),0 30px 80px -40px rgba(255,160,40,.4)}
.cp-stage video{display:block;width:100%;height:100%;object-fit:cover}
.cp-stage:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(5,12,10,.32),transparent 20%,transparent 78%,rgba(5,12,10,.55))}
.cp-legend{position:absolute;top:18px;left:18px;z-index:2;display:flex;gap:14px;padding:8px 14px;border-radius:999px;background:var(--cp-glass);border:1px solid var(--cp-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:12px;font-weight:700}
.cp-legend span{display:flex;align-items:center;gap:7px}
.cp-swatch{display:block;width:18px;height:4px;border-radius:4px}
.cp-load{background:linear-gradient(90deg,var(--cp-violet-deep),#f078ff);box-shadow:0 0 10px rgba(194,123,255,.8)}
.cp-launch{background:linear-gradient(90deg,var(--cp-gold),var(--cp-ember));box-shadow:0 0 10px rgba(255,190,60,.8)}
.cp-meta{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:9px;font-weight:700;letter-spacing:.16em;color:rgba(240,240,231,.78)}
.cp-meta span+span:before{content:'';display:inline-block;width:3px;height:3px;margin:0 14px 2px 0;border-radius:50%;background:currentColor;opacity:.6}

/* A tag sits on the path: a ring on the exact point, its chip beside it. */
.cp-tag{position:absolute;left:var(--x);top:var(--y);z-index:2;display:flex;align-items:center;gap:7px;padding:6px 11px 6px 10px;margin:-15px 0 0 20px;border-radius:999px;white-space:nowrap;background:var(--cp-glass);border:1px solid var(--cp-line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:11px;line-height:1.3;color:#e4e9df;opacity:0;transform:translateX(-6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.cp-tag b{font-size:9px;letter-spacing:.16em;color:#fff}
.cp-tag:before{content:'';position:absolute;left:-28px;top:50%;width:14px;height:14px;margin-top:-8px;border-radius:50%;border:1.5px solid rgba(255,255,255,.92);box-shadow:0 0 12px rgba(255,255,255,.55)}
.cp-tag:after{content:'';position:absolute;left:-12px;top:50%;width:12px;height:1px;background:rgba(255,255,255,.7)}
.cp-tag.cp-left{margin:-15px 0 0 -20px;transform:translateX(calc(-100% + 6px))}
.cp-tag.cp-left:before{left:auto;right:-28px}
.cp-tag.cp-left:after{left:auto;right:-12px}
.cp-tag.on{opacity:1;transform:none}
.cp-tag.cp-left.on{transform:translateX(-100%)}
.cp-tag .cp-violet{color:#e2b8ff}.cp-tag .cp-gold{color:#ffe08a}
.cp-hot b{color:#fff3d6}.cp-hot:before{border-color:#fff3d6;box-shadow:0 0 16px rgba(255,200,90,.9)}
.cp-play{position:absolute;right:18px;top:18px;z-index:3;display:flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 11px;border-radius:999px;border:1px solid var(--cp-line);background:var(--cp-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:11px;font-weight:700}
.cp-play-icon{width:10px;height:10px;border-inline:3px solid currentColor;box-sizing:border-box}
.cp-play[aria-pressed=true] .cp-play-icon{border-inline:0;border-block:5px solid transparent;border-left:9px solid currentColor;width:9px;height:10px}

.cp-read{align-self:end}
.cp-read .cp-kicker{font-size:10px;font-weight:700;letter-spacing:.16em;color:#9fae9e;margin-bottom:22px}
.cp-read ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--cp-line)}
.cp-read li{display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:start;padding:24px 0;border-bottom:1px solid var(--cp-line)}
.cp-read h3{font-size:clamp(24px,2.3vw,32px);letter-spacing:-.035em;margin-bottom:8px}
.cp-read li p{color:#b9c4b6;max-width:400px}
.cp-key{display:block;width:54px;height:8px;margin-top:14px;border-radius:8px}
.cp-key.cp-ring{width:26px;height:26px;margin:4px 0 0 14px;border-radius:50%;background:none;border:2px solid #fff3c4;box-shadow:0 0 14px rgba(255,220,120,.8),inset 0 0 8px rgba(255,220,120,.6)}
.cp-key.cp-burst{width:30px;height:30px;margin:3px 0 0 12px;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,rgba(255,236,170,.85) 30%,rgba(255,150,30,.35) 55%,transparent 72%),repeating-conic-gradient(from 8deg,rgba(255,240,200,.95) 0 5deg,transparent 5deg 30deg);mask:radial-gradient(circle,#000 70%,transparent 71%)}

/* Up close: a strip of plates, swiped on a phone. */
.cp-close{margin-top:120px}
.cp-close-head{display:flex;align-items:end;gap:28px;margin-bottom:34px;flex-wrap:wrap}
.cp-close-head .eyebrow{width:100%;margin:0;color:#9fae9e}
.cp-close-head h3{font-size:clamp(34px,3.6vw,54px);letter-spacing:-.05em}
.cp-close-head h3 em{color:var(--lime)}
.cp-swipe{display:none;margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.16em;color:#9fae9e}
.cp-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.cp-strip:focus-visible{outline:2px solid #78aa30;outline-offset:8px}
.cp-card{margin:0}
.cp-plate{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#0b1512;box-shadow:0 0 0 1px var(--cp-line),0 30px 60px -30px rgba(0,0,0,.8)}
.cp-plate img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.cp-card:hover .cp-plate img{transform:scale(1.035)}
.cp-pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.cp-pin:before{content:'';position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.85);animation:cp-pulse 2.6s var(--ease) infinite}
.cp-pin b{position:absolute;left:24px;top:-12px;padding:5px 10px 4px;border-radius:999px;white-space:nowrap;background:var(--cp-glass);border:1px solid var(--cp-line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:9px;letter-spacing:.16em}
.cp-pin-left b{left:auto;right:24px}
.cp-pin-green:before{border-color:rgba(190,255,170,.9)}
.cp-card figcaption{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:20px 4px 0}
.cp-card figcaption span{font-size:10px;font-weight:700;letter-spacing:.12em;color:#9fae9e;padding-top:3px}
.cp-card figcaption p{color:#b9c4b6;font-size:14px;line-height:1.55}
.cp-card figcaption b{color:var(--ivory)}
.cp-card-path figcaption span{color:var(--cp-green)}
@keyframes cp-pulse{0%{transform:scale(.7);opacity:0}25%{opacity:1}100%{transform:scale(1.25);opacity:0}}

.cp-foot{display:grid;grid-template-columns:1fr auto;gap:28px 48px;align-items:center;margin-top:84px;padding-top:36px;border-top:1px solid var(--cp-line)}
.cp-slowmo{display:flex;gap:20px;align-items:flex-start;max-width:640px}
.cp-slowmo svg{flex:0 0 44px;width:44px;height:44px;color:var(--lime)}
.cp-slowmo p{color:#c5cfc1}
.cp-slowmo b{color:var(--ivory)}
.cp-fine{grid-column:1/-1;font-size:11px;line-height:1.6;color:#7f8d7f}

@media(max-width:1100px){
  .cp-hero{grid-template-columns:minmax(0,440px) minmax(0,1fr);column-gap:48px}
  .cp h2{font-size:52px}
  .cp-strip{grid-template-columns:repeat(4,minmax(240px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(50% - 50vw);padding:0 calc(50vw - 50%) 8px;scroll-padding-inline:calc(50vw - 50%);scrollbar-width:none}
  .cp-strip::-webkit-scrollbar{display:none}
  .cp-card{scroll-snap-align:start}
  .cp-swipe{display:block}
}
@media(max-width:800px){
  .cp{padding-block:84px 72px}
  .cp-head{margin-bottom:0}
  .cp h2{font-size:50px}
  .cp-lede{font-size:16px;margin-top:22px}
  .cp-hero{grid-template-columns:1fr;grid-template-areas:'head' 'stage' 'read';row-gap:40px}
  .cp-stage{border-radius:24px}
  .cp-legend{top:12px;left:12px;padding:6px 11px;gap:11px;font-size:11px}
  .cp-tag{font-size:10px;padding:5px 9px 5px 8px;margin-left:17px}
  .cp-tag b{font-size:8px}
  .cp-tag:before{left:-24px;width:12px;height:12px;margin-top:-7px}
  .cp-tag:after{left:-11px;width:10px}
  .cp-tag.cp-left{margin-left:-17px}
  .cp-tag.cp-left:before{right:-24px}.cp-tag.cp-left:after{right:-11px}
  .cp-meta{left:14px;bottom:13px;font-size:8px;gap:4px 10px}
  .cp-meta span+span:before{margin-right:10px}
  .cp-play{right:12px;top:12px;height:32px}
  .cp-read li{grid-template-columns:44px 1fr;gap:14px;padding:20px 0}
  .cp-key{width:44px}
  .cp-close{margin-top:84px}
  .cp-strip{grid-template-columns:repeat(4,78%);gap:14px}
  .cp-plate{border-radius:18px}
  .cp-foot{grid-template-columns:1fr;margin-top:60px}
  .cp-foot .button{justify-self:start}
}
@media(max-width:380px){.cp h2{font-size:44px}.cp-tag{font-size:9px}}
@media(prefers-reduced-motion:reduce){.cp-pin:before{animation:none;opacity:1}.cp-tag{transition:none}.cp-plate img{transition:none}}
.motion-paused .cp-pin:before{animation:none;opacity:1}

/* Hero (redesign, 24 Oct 2026): the stock course photo gives way to a real swing read by the app.
   Desktop: copy left, the swing right. Phone: the swing first, the headline rising out of its fade. */
.hero-swing{background:radial-gradient(48% 60% at 80% 46%,rgba(110,50,190,.3),transparent 70%),radial-gradient(30% 34% at 92% 82%,rgba(255,170,40,.13),transparent 70%),linear-gradient(180deg,#0c2219,#06140e)}
.hero-swing .hero-shade{background:linear-gradient(90deg,rgba(5,20,14,.55),transparent 55%);z-index:-3}
.hero-swing #flow-field{opacity:.32}
.hero-grid{position:relative;height:100%;box-sizing:border-box;padding:118px 0 104px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'copy stage';align-items:center;column-gap:clamp(40px,5vw,96px)}
.hero-swing .hero-content{grid-area:copy;padding-top:0}
.hero-swing h1{font-size:clamp(64px,6.3vw,118px)}
.hero-swing .hero-description>p:first-child{font-size:15px;line-height:1.75;max-width:520px}
.hero-stage{grid-area:stage;position:relative;margin:0;height:clamp(540px,calc(min(100svh,1100px) - 236px),780px);aspect-ratio:3/4;border-radius:32px;background:#0b1512;box-shadow:0 0 0 1px rgba(240,240,231,.14),0 60px 140px -40px rgba(110,50,190,.6),0 40px 90px -50px rgba(255,160,40,.45);animation:enter-up 1.2s var(--ease) both .3s}
.hero-stage video{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.hero-stage:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(5,12,10,.38),transparent 18%,transparent 74%,rgba(5,12,10,.7))}
.hero-stage .cp-legend,.hero-stage .cp-play{z-index:3}
.hero-rail{position:absolute;left:22px;right:22px;bottom:22px;z-index:3;display:flex;justify-content:space-between;margin:0;padding:16px 0 0;list-style:none;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,240,231,.55)}
.hero-rail:before{content:'';position:absolute;top:4px;left:4px;right:4px;height:1px;background:rgba(240,240,231,.28)}
.hero-rail li{position:relative;transition:color .4s}
.hero-rail li:before{content:'';position:absolute;top:-16px;left:0;width:9px;height:9px;border-radius:50%;background:#0b1512;border:1px solid rgba(240,240,231,.5);transition:background .4s,box-shadow .4s,border-color .4s}
.hero-rail li:last-child:before{left:auto;right:0}
.hero-rail li.on{color:#fff}
.hero-rail li.on:before{background:var(--lime);border-color:var(--lime);box-shadow:0 0 12px rgba(215,237,154,.9)}
.hero-stamp{position:absolute;left:-46px;top:58%;z-index:4;display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:999px;background:rgba(9,26,19,.78);border:1px solid rgba(240,240,231,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:9px;font-weight:700;letter-spacing:.15em;white-space:nowrap;box-shadow:0 20px 40px -20px #000}
@media(max-width:1100px){
  .hero-grid{column-gap:36px}
  .hero-swing h1{font-size:clamp(52px,7vw,80px)}
  .hero-stage{height:clamp(500px,calc(min(100svh,1000px) - 236px),620px)}
  .hero-stamp{left:-24px}
}
@media(max-width:800px){
  .hero.hero-swing{height:auto;min-height:0;max-height:none}
  .hero-grid{display:flex;flex-direction:column;align-items:stretch;padding:104px 0 0;height:auto}
  .hero-stage{width:100%;max-width:540px;align-self:center;height:auto;aspect-ratio:4/5;border-radius:24px}
  .hero-stage:after{background:linear-gradient(180deg,rgba(5,12,10,.34),transparent 16%,transparent 70%,rgba(8,24,17,.94))}
  .hero-stage .cp-legend{top:12px;left:12px}
  .hero-rail{left:16px;right:16px;bottom:44px;font-size:8px;letter-spacing:.12em}
  .hero-stamp{left:16px;top:auto;bottom:-14px;padding:9px 13px;font-size:8px}
  .hero-swing .hero-content{position:relative;z-index:5;margin-top:44px}
  .hero-swing .hero-description>p:first-child{font-size:14px;max-width:none}
  .hero.hero-swing .hero-bottom{position:relative;bottom:auto;margin-top:56px;margin-bottom:26px}
}

/* Feature sections (redesign, 25 Oct 2026): angles, shaft plane, next position, compare, Pro list.
   Same ground and glass as the Club path section; the app's overlay colours carry each one
   (skeleton and plane cyan 39F1EF, next-position amber FFBF5C / green 66E8AD). */
.cpx{--cpx-cyan:#39f1ef;--cpx-amber:#ffbf5c;--cpx-green:#66e8ad;padding-block:110px}
.cpx-alt{background:#07110e}
.cpx-alt .cp-aura,.cpx .cp-aura{display:none}
.cpx-head{max-width:760px;margin-bottom:56px}
.cpx-head .eyebrow,.cpx-copy .eyebrow{display:flex;align-items:center;gap:12px;color:#c9d3c4;margin-bottom:24px}
.cpx h2 em{background:none;color:var(--lime)}
.cpx h2 em.cpx-cyan{color:var(--cpx-cyan)}
.cpx h2 em.cpx-amber{color:var(--cpx-amber)}
.cpx h2 em.cpx-violet{color:#c99bff}
.cpx-badge{position:absolute;left:14px;top:14px;padding:6px 11px 5px;border-radius:999px;background:var(--cp-glass);border:1px solid var(--cp-line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:9px;font-weight:700;letter-spacing:.16em}
.cpx-free{display:inline-flex;padding:4px 9px 3px;border-radius:999px;background:var(--lime);color:var(--forest);letter-spacing:.16em}

.cpx-angles{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1040px}
.cpx-angle{margin:0}
.cpx-angle .cp-plate{border-radius:26px}
.cpx-angle figcaption{padding:24px 4px 0}
.cpx-angle h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.035em;margin-bottom:16px}
.cpx-reads{margin:0;display:grid;gap:10px}
.cpx-reads div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding-top:10px;border-top:1px solid var(--cp-line)}
.cpx-reads dt{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--cpx-cyan);padding-top:4px}
.cpx-reads div+div dt{color:#8b998b}
.cpx-reads dd{margin:0;color:#c5cfc1;font-size:14px;line-height:1.55}
.cpx-film{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:64px;max-width:1040px}
.cpx-check,.cpx-fps{padding:28px;border-radius:24px;background:rgba(240,240,231,.035);border:1px solid var(--cp-line)}
.cpx .cp-kicker{font-size:10px;font-weight:700;letter-spacing:.16em;color:#9fae9e;margin-bottom:18px}
.cpx-check ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cpx-check li{position:relative;padding-left:30px;color:#dfe6da}
.cpx-check li:before{content:'';position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--lime);background:radial-gradient(circle,var(--lime) 0 3px,transparent 3.5px)}
.cpx-fps ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cpx-fps li{display:grid;grid-template-columns:128px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--cp-line)}
.cpx-fps li:last-child{border-bottom:0}
.cpx-fps b{font-size:13px;color:var(--ivory)}
.cpx-fps span{color:#b9c4b6;font-size:14px}
.cpx-quote{margin:56px 0 0;padding:0 0 0 24px;border-left:2px solid var(--cpx-cyan);max-width:760px}
.cpx-quote p{font-family:Instrument,Georgia,serif;font-style:italic;font-size:clamp(26px,2.6vw,38px);line-height:1.2;color:var(--ivory)}
.cpx-quote cite{display:block;margin-top:14px;font-style:normal;font-size:12px;color:#8b998b}

.cpx-split{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(48px,7vw,120px);align-items:center}
.cpx-split-rev{grid-template-columns:minmax(0,1fr) minmax(0,520px)}
.cpx-stage{margin:0}
.cpx-split>*{min-width:0}
.cpx-tall{border-radius:28px;box-shadow:0 0 0 1px var(--cp-line),0 50px 110px -40px rgba(57,241,239,.28)}
#next-position .cpx-tall{box-shadow:0 0 0 1px var(--cp-line),0 50px 110px -40px rgba(255,191,92,.32)}
.cpx-cap{margin-top:14px;font-size:12px;color:#8b998b}
.cpx-plane-legend{top:auto;bottom:14px;left:14px}
.cpx-dash{display:block;width:22px;height:3px;background:repeating-linear-gradient(90deg,var(--cpx-cyan) 0 7px,transparent 7px 11px)}
.cpx-points{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--cp-line)}
.cpx-points li{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;padding:20px 0;border-bottom:1px solid var(--cp-line)}
.cpx-points li>i{margin-top:10px}
.cpx-points p{color:#b9c4b6}
.cpx-points b{color:var(--ivory)}
.cpx-cam{display:block;width:22px;height:16px;border:1.5px solid #c5cfc1;border-radius:4px;position:relative}
.cpx-cam:after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;border:1.5px solid #c5cfc1}
.cpx-cyanbar{background:var(--cpx-cyan);box-shadow:0 0 10px rgba(57,241,239,.7)}
.cp-pin.cpx-pin-amber:before{border-color:var(--cpx-amber)}
.cp-pin.cpx-pin-green:before{border-color:var(--cpx-green)}
.cpx-pin-amber b{color:#ffe2b0}.cpx-pin-green b{color:#c6ffe5}

.cpx-panel{margin-top:32px;padding:20px;border-radius:22px;background:linear-gradient(135deg,#0e1f29,#09111a);border:1px solid rgba(74,227,247,.16)}
.cpx-panel-top{display:flex;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:.1em}
.cpx-panel-top b{color:var(--cpx-amber);font-size:10px}
.cpx-events{display:flex;gap:6px;margin:16px -20px 14px;padding:0 20px;overflow-x:auto;scrollbar-width:none}
.cpx-events::-webkit-scrollbar{display:none}
.cpx-events span{flex:0 0 auto;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:11px;font-weight:600;color:#c5cfc1}
.cpx-events span.on{background:rgba(255,191,92,.18);border-color:rgba(255,191,92,.65);color:#fff}
.cpx-legend2{display:flex;gap:14px;font-size:11px;color:#c5cfc1;margin-bottom:12px}
.cpx-legend2 span{display:inline-flex;align-items:center;gap:6px}
.cpx-legend2 i{display:inline-block;width:7px;height:7px;border-radius:50%}
.cpx-legend2 .a{background:#4ae3f7}.cpx-legend2 .t{background:var(--cpx-amber)}.cpx-legend2 .k{background:var(--cpx-green)}
.cpx-segs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cpx-seg{display:grid;gap:3px;text-align:left;padding:11px 12px;border-radius:12px;border:1px solid transparent;background:rgba(255,255,255,.04);font-size:12px}
.cpx-seg span{font-size:10px;opacity:.85}
.cpx-seg.change{color:var(--cpx-amber)}.cpx-seg.keep{color:var(--cpx-green)}
.cpx-seg[aria-pressed=true]{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}
.cpx-cue{margin-top:14px;font-size:14px;color:#e4e9df;min-height:1.6em}

.cpx-card{margin:0}
.cpx-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cpx-compare .cp-plate{border-radius:20px}
.cpx-compare img{transition:opacity .35s}
.cpx-switch{display:inline-flex;margin-top:16px;padding:4px;border-radius:999px;background:rgba(240,240,231,.06);border:1px solid var(--cp-line)}
.cpx-switch button{border:0;background:none;padding:9px 18px;border-radius:999px;font-size:12px;font-weight:700;color:#c5cfc1}
.cpx-switch button[aria-pressed=true]{background:var(--lime);color:var(--forest)}

.cpx-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cpx-grid li{padding:24px;border-radius:20px;background:rgba(240,240,231,.035);border:1px solid var(--cp-line);transition:border-color .3s,background .3s}
.cpx-grid li:hover{border-color:rgba(215,237,154,.4);background:rgba(240,240,231,.06)}
.cpx-grid h3{font-size:22px;letter-spacing:-.03em;margin:14px 0 8px}
.cpx-grid p{color:#b9c4b6;font-size:14px;line-height:1.55}
.cpx-need{display:inline-flex;padding:5px 10px 4px;border-radius:999px;border:1px solid rgba(215,237,154,.35);color:var(--lime);font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.cpx-wide{grid-column:span 3}
.cpx-cta{display:flex;align-items:center;gap:28px;margin-top:48px;flex-wrap:wrap}
.cpx-cta p{color:#9fae9e;font-size:13px}

@media(max-width:1100px){
  .cpx-split,.cpx-split-rev{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:44px}
  .cpx-split-rev{grid-template-columns:minmax(0,1fr) minmax(0,420px)}
  .cpx-grid{grid-template-columns:repeat(2,1fr)}.cpx-wide{grid-column:span 2}
}
@media(max-width:800px){
  .cpx{padding-block:80px}
  .cpx h2{font-size:46px}
  .cpx-head{margin-bottom:36px}
  .cpx-angles,.cpx-film{grid-template-columns:1fr;gap:40px}
  .cpx-film{margin-top:44px;gap:16px}
  .cpx-check,.cpx-fps{padding:22px}
  .cpx-fps li{grid-template-columns:110px 1fr}
  .cpx-split,.cpx-split-rev{grid-template-columns:minmax(0,1fr);gap:36px}
  .cpx-split-rev .cpx-stage{order:-1}
  .cpx-stage,.cpx-compare-card{max-width:520px}
  .cpx-segs{grid-template-columns:1fr 1fr 1fr}
  .cpx-seg{padding:10px 9px;font-size:11px}
  .cpx-grid{grid-template-columns:1fr;gap:12px}.cpx-wide{grid-column:auto}
  .cpx-grid li{padding:20px}
  .cpx-cta{flex-direction:column;align-items:flex-start;gap:16px}
}

/* Motion (redesign, 25 Oct 2026). One idea throughout: light drawn the way the app draws a swing.
   - Headings: as a heading enters, a bright tracer sweeps across it and the words appear behind it,
     like the club drawing its path; the italic words then flare once.
   - Buttons: on hover or keyboard focus a comet of light runs round the edge; every press sets off
     the app's impact starburst (12 rays, white-hot to ember) from the point pressed.
     Its class is .cp-press, never the How-to-read icon's .cp-burst: sharing that name pulled
     the icon out of its row and squeezed "The flash is impact." into a 54 px column.
   Nothing runs with reduced motion or the page's "Pause motion". */
.movement-study img{filter:none}
@property --cp-comet{syntax:'<angle>';inherits:false;initial-value:0deg}

/* The ink layer is a span club.js wraps round each heading's words: clipping the heading itself
   would hide it from the page's IntersectionObserver, which then never reveals it. */
.js-motion h2.reveal{opacity:1;transform:none}
.cp-ink{display:inline-block;position:relative;max-width:100%}
.js-motion .cp-ink{clip-path:inset(-.35em 101% -.35em -.25em);transition:clip-path 1.3s cubic-bezier(.65,.04,.27,1) .05s}
.js-motion .visible .cp-ink{clip-path:inset(-.35em -.3em -.35em -.25em)}
.cp-ink:after{content:'';position:absolute;top:-.08em;bottom:-.02em;left:0;width:3px;border-radius:3px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,var(--cp-tracer,#d7ed9a) 18%,#fff 50%,var(--cp-tracer,#d7ed9a) 82%,transparent);
  box-shadow:0 0 22px 5px color-mix(in srgb,var(--cp-tracer,#d7ed9a) 60%,transparent),0 0 60px 12px color-mix(in srgb,var(--cp-tracer,#d7ed9a) 22%,transparent)}
.js-motion .visible .cp-ink:after{animation:cp-trace 1.3s cubic-bezier(.65,.04,.27,1) .05s both}
.js-motion .visible .cp-ink em{animation:cp-flare 1.5s ease-out 1.05s both}
.light-section{--cp-tracer:#5f8a2c}
.cp{--cp-tracer:#e7a6ff}
#angles,#shaft-plane,#compare{--cp-tracer:#39f1ef}
#next-position{--cp-tracer:#ffbf5c}
@keyframes cp-trace{0%{left:0;opacity:0}7%{opacity:1}88%{opacity:1}100%{left:calc(100% - 3px);opacity:0}}
@keyframes cp-flare{0%{filter:brightness(1)}35%{filter:brightness(1.45) drop-shadow(0 0 16px color-mix(in srgb,var(--cp-tracer,#d7ed9a) 70%,transparent))}100%{filter:brightness(1)}}

.button,.store-link,.lb-store,.lb-continue{position:relative;isolation:isolate}
.button:before,.store-link:before,.lb-store:before,.lb-continue:before{content:'';position:absolute;inset:-2px;padding:2px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:conic-gradient(from var(--cp-comet),transparent 0 58%,rgba(215,237,154,.35) 72%,#fff 86%,#ffd23c 91%,transparent 97%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.button:hover:before,.button:focus-visible:before,.store-link:hover:before,.store-link:focus-visible:before,.lb-store:hover:before,.lb-continue:hover:before{opacity:1;animation:cp-comet 1.7s linear infinite}
.button:hover,.store-link:hover{box-shadow:0 18px 40px -22px rgba(215,237,154,.7)}
@keyframes cp-comet{to{--cp-comet:360deg}}
.text-link>span:last-child,.button>span:last-child{transition:transform .45s cubic-bezier(.3,1.6,.5,1)}

.cp-press{position:absolute;left:var(--x);top:var(--y);width:0;height:0;pointer-events:none;z-index:3}
.cp-press:before,.cp-press:after{content:'';position:absolute;border-radius:50%}
.cp-press:before{left:-48px;top:-48px;width:96px;height:96px;
  background:repeating-conic-gradient(from 6deg,#ff8a1f 0 3.5deg,transparent 3.5deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 0 26%,#000 27% 60%,transparent 61%);mask:radial-gradient(circle,transparent 0 26%,#000 27% 60%,transparent 61%);
  animation:cp-press-rays .7s cubic-bezier(.15,.75,.25,1) forwards}
.cp-press:after{left:-14px;top:-14px;width:28px;height:28px;background:radial-gradient(circle,#fff 0 18%,#ffd23c 34%,rgba(255,120,10,.55) 52%,rgba(255,120,10,0) 70%);animation:cp-core .45s ease-out forwards}
@keyframes cp-press-rays{0%{transform:scale(.3) rotate(0);opacity:1;filter:hue-rotate(0)}60%{opacity:.9}100%{transform:scale(1.2) rotate(17deg);opacity:0}}
@keyframes cp-core{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}

@media(prefers-reduced-motion:reduce){
  .js-motion .cp-ink,.js-motion .visible .cp-ink{clip-path:none;transition:none}
  .cp-ink:after,.js-motion .visible .cp-ink em{animation:none!important;opacity:0}
  .button:hover:before,.button:focus-visible:before,.store-link:hover:before,.store-link:focus-visible:before,.lb-store:hover:before,.lb-continue:hover:before{animation:none;opacity:0}
  .cp-press{display:none}
}
.motion-paused .cp-ink{clip-path:none!important;transition:none!important}
.motion-paused .cp-ink:after,.motion-paused .cp-ink em{opacity:0;animation:none!important}
.motion-paused .button:before,.motion-paused .store-link:before{animation:none!important;opacity:0!important}
.motion-paused .cp-press{display:none}

/* Pricing card Pro list: the app's full 1.30.0 Plan list (15 items, its order), in two compact
   columns where there is room; the three 1.30.0 additions marked NEW, as on the Plan screen. */
.price-card ul.pro-list{columns:2;column-gap:22px;line-height:1.5}
.pro-list li{break-inside:avoid;padding:5px 0 5px 22px;text-indent:-22px}
.pro-list li:before{margin-right:10px}
.pro-list b{display:inline-block;margin-left:6px;padding:1px 6px 0;border-radius:999px;background:var(--forest);color:var(--lime);font-size:8px;letter-spacing:.12em;text-indent:0;vertical-align:1px}
@media(max-width:540px){.price-card ul.pro-list{columns:1}}
.cpx-new{display:inline-flex;margin-left:8px;padding:5px 9px 4px;border-radius:999px;background:linear-gradient(100deg,#c27bff,#ffd23c);color:var(--forest);font-size:9px;font-weight:700;letter-spacing:.13em}