/* =====================================================================
   PRODUCTS OVERVIEW (SC-534) - /products/
   Uses the product page template (page-category.css) for the hero type,
   buttons and closing call to action. This file adds:
     .px-hero3   after Hudl: a dark stage, a tilted wall of photos and screens, a two-weight headline
     .px-all     a bento of cards, one per category, each with its own drawing
     .px-flow    one registration and the four places it shows up
   Every drawing is aria-hidden; the cards' text and links carry the content.
   ===================================================================== */
.px-page{--px-ink:#0d1b2a; --px-text:#41505d; --px-muted:#62707c; --px-line:#e6ebef; --px-teal:#007a76;}

/* ---------- hero, after Hudl: a dark stage, a tilted wall of camp photos and SideCoach screens drifting past
   under a teal glow, and a two-weight headline with square buttons along the bottom ---------- */
.px-hero3{position:relative; isolation:isolate; overflow:hidden; min-height:min(720px, calc(100vh - 60px)); display:flex; align-items:flex-end;
  background:#06131b; color:#fff;}
.px-stage{position:absolute; inset:0; z-index:-2; perspective:1700px; perspective-origin:70% 40%; overflow:hidden;}
.px-wall{position:absolute; left:18%; top:-14%; width:150%; display:flex; flex-direction:column; gap:18px;
  transform:rotateY(-16deg) rotateX(9deg) rotateZ(-5deg); transform-origin:30% 50%;}
.px-wrow{display:flex; gap:18px; width:max-content; animation:px-drift 70s linear infinite;}
.px-wrow.r1{animation-duration:85s; animation-direction:reverse; margin-left:-180px;}
.px-wrow.r2{animation-duration:78s; margin-left:-90px;}
@keyframes px-drift{to{transform:translateX(-50%);}}
.px-w{position:relative; flex:none; width:300px; height:200px; overflow:hidden; border-radius:12px;
  border:1px solid rgba(255,255,255,.1); background:#0e2230; box-shadow:0 30px 60px -30px rgba(0,0,0,.8);}
.px-w.wide{width:470px;}
.px-w.ph img{width:100%; height:100%; object-fit:cover; filter:saturate(.9) brightness(.82);}
.px-w.ph span{position:absolute; left:12px; bottom:10px; padding:3px 8px; border-radius:6px; background:rgba(6,19,27,.65);
  font-size:11px; font-weight:600; color:#d8eef0;}
.px-w.ui{padding:14px 16px; font-size:12px; color:#c9dbe2; background:linear-gradient(160deg,#10283a,#0b1d2a);}
.px-w-h{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px;}
.px-w-h > b{font-size:13px; font-weight:600; color:#fff;}
.px-w-h small{font-size:11px; color:#7f9cab;}
.px-w-h small.ok{color:#5fd8d4; font-weight:600;}
.px-w-h .n{font-size:18px; font-weight:400; color:#5fd8d4;}
.px-w-lu{display:grid; grid-template-columns:54px repeat(4,1fr); gap:5px; align-items:center;}
.px-w-lu em{font-style:normal; font-weight:600; color:#e5f0f3;}
.px-w-lu i{padding:5px 0; border-radius:5px; background:rgba(122,160,255,.16); color:#a9c1ff; font-style:normal; font-size:10.5px; font-weight:700; text-align:center;}
.px-w-lu i.p{background:#5b82f5; color:#fff;}
.px-w.ui strong{display:block; font-size:28px; font-weight:300; color:#fff; letter-spacing:-.01em;}
.px-w-bars{display:flex; align-items:flex-end; gap:7px; height:86px; margin-top:12px;}
.px-w-bars i{flex:1; height:var(--h); border-radius:3px 3px 0 0; background:linear-gradient(180deg,#5fd8d4,#00807c);}
.px-w-r{display:grid; grid-template-columns:24px 1fr 16px; align-items:center; gap:10px; padding:7px 0; border-top:1px solid rgba(255,255,255,.07);}
.px-w-r i{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:rgba(95,216,212,.15); color:#5fd8d4; font-size:9.5px; font-style:normal; font-weight:700;}
.px-w-r em{width:16px; height:16px; border-radius:50%; border:1.5px solid rgba(255,255,255,.25);}
.px-w-r em.on{background:#00a39d; border-color:#00a39d;}
.px-w-c{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-top:1px solid rgba(255,255,255,.07);}
.px-w-c b{display:block; color:#fff; font-weight:600;}
.px-w-c small{font-size:10.5px; color:#7f9cab;}
.px-w-c u{padding:4px 10px; border-radius:99px; background:#007a76; color:#fff; font-weight:600; text-decoration:none;}
.px-w-f{display:flex; justify-content:space-between; padding:9px 0; border-top:1px solid rgba(255,255,255,.07);}
.px-w-f small{color:#7f9cab;}
.px-w-f b{color:#fff; font-weight:600;}
.px-w.fld svg{display:block; width:100%; height:140px;}
.px-w.fld circle{fill:#5fd8d4;}
/* the teal glow behind the wall, and the dark that holds the words */
.px-glow{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 70% at 88% 30%, rgba(0,188,183,.38), transparent 70%),
    radial-gradient(40% 50% at 70% 85%, rgba(42,127,212,.22), transparent 70%),
    linear-gradient(90deg, rgba(6,19,27,.96) 0%, rgba(6,19,27,.82) 36%, rgba(6,19,27,.2) 70%, rgba(6,19,27,.1)),
    linear-gradient(0deg, rgba(6,19,27,.98) 0%, rgba(6,19,27,.6) 30%, transparent 62%);}
.px-hero3-in{position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; width:100%;
  padding-top:clamp(200px,24vw,320px); padding-bottom:clamp(48px,6vw,80px);}
.px-h3{margin:0; text-transform:uppercase; line-height:.95; color:#fff;}
.px-h3 b{display:block; font-family:var(--pc-display); font-weight:400; font-size:clamp(46px,6.2vw,92px); letter-spacing:.3px;}
.px-h3 b,.px-h3 span{display:block; font-family:var(--pc-display); font-weight:400; font-size:clamp(46px,6.2vw,92px); letter-spacing:.3px;}
/* the second line in teal, as on every product page's title (a lighter teal, to read on the dark) */
.px-h3 span{color:#5fd8d4;}
.px-h3-copy p{max-width:30em; margin:22px 0 0; font-size:clamp(16px,1.4vw,19px); line-height:1.55; color:#b9ccd4;}
.px-h3-ctas{display:flex; flex-direction:column; gap:12px; flex:none; width:280px;}
.px-sq{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px; border:1.5px solid rgba(255,255,255,.55);
  border-radius:4px; color:#fff; font-size:16px; font-weight:600; text-decoration:none; transition:background .2s, border-color .2s, color .2s;}
.px-sq svg{width:9px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s;}
.px-sq:hover{border-color:#fff; background:rgba(255,255,255,.08);}
.px-sq:hover svg{transform:translateX(3px);}
.px-sq-solid{background:#fff; border-color:#fff; color:#0b1d2a;}
.px-sq-solid:hover{background:#e6f8f7; border-color:#e6f8f7;}
.px-sq:focus-visible{outline:2px solid #5fd8d4; outline-offset:3px;}

/* ---------- sections ---------- */
.px-sec{padding:clamp(72px,9vw,120px) 0;}
.px-all{background:#fff;}
.px-flow{background:#f6f9fc; border-top:1px solid #edf1f5;}
.px-sec .pc-sh{max-width:22em; font-weight:500;}
.px-sec .pc-sh b{font-weight:500;}

/* ---------- bento ---------- */
.px-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; margin:48px 0 0; padding:0; list-style:none;}
.px-card{position:relative; grid-column:span 2; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid #e3e8ee; border-radius:14px; background:#fff; transition:box-shadow .25s, border-color .25s;}
.px-card.w2{grid-column:span 4;}
.px-card.w15{grid-column:span 3;}
/* a gentle lift: it waits a beat before rising, so sweeping the mouse across the grid does not set every card off */
.px-card{transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;}
.px-card:hover{z-index:3; transform:translateY(-3px); border-color:#d3dbe2; transition-delay:.15s;
  box-shadow:0 1px 2px rgba(13,27,42,.04), 0 24px 50px -32px rgba(13,27,42,.35);}
.px-card-t{position:relative; z-index:2; padding:22px 24px 0; pointer-events:none;}
.px-card-t a{pointer-events:auto;}
.px-ico{display:inline-grid; flex:none; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--tint); box-shadow:inset 0 0 0 1px rgba(13,27,42,.05);}
.px-ico svg{width:15px; height:15px; fill:none; stroke:var(--acc); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.px-card h3{display:flex; align-items:center; gap:10px; margin:0; font-size:17px; font-weight:600; letter-spacing:-.01em;}
.px-go{display:inline-flex; align-items:center; gap:8px; color:var(--px-ink); text-decoration:none;}
/* the whole card is the link to its page; the small links sit above it */
.px-go::after{content:""; position:absolute; inset:-9999px; z-index:1;}

.px-arr{width:10px; height:10px; fill:none; stroke:var(--acc); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.px-arr path:first-child{opacity:0; transition:opacity .2s;}
.px-arr path:last-child{transition:transform .2s;}
.px-card:hover .px-arr path:first-child{opacity:1;}
.px-card:hover .px-arr path:last-child{transform:translateX(2px);}
.px-card p{max-width:30em; margin:8px 0 0; font-size:14.5px; line-height:1.5; color:var(--px-muted);}
.px-subs{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0; list-style:none;}
.px-subs a{position:relative; z-index:2; display:inline-block; padding:3px 10px; border-radius:6px; border:1px solid #e3e8ee;
  background:#fff; font-size:13px; font-weight:500; color:var(--px-text); text-decoration:none; transition:border-color .2s, color .2s;}
.px-subs a:hover{border-color:var(--acc); color:var(--acc);}
.px-art{position:relative; flex:none; height:290px; margin:20px 12px 12px; overflow:hidden; border-radius:10px;
  background:linear-gradient(155deg, var(--tint) 20%, var(--wash) 120%);}
/* a fine dot grid inside each frame */
.px-art::before{content:""; position:absolute; inset:0; background:radial-gradient(rgba(13,27,42,.09) 1px, transparent 1.2px) 0 0/14px 14px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 70%); mask-image:linear-gradient(180deg,transparent,#000 70%);}
.px-card{justify-content:space-between;}
.px-d{position:absolute; font-size:12px; color:var(--px-ink); background:#fff; border:1px solid rgba(13,27,42,.08); border-radius:10px;
  box-shadow:0 1px 1px rgba(13,27,42,.04), 0 2px 4px rgba(13,27,42,.03), 0 16px 32px -16px rgba(13,27,42,.3); font-variant-numeric:tabular-nums;}
.px-d small{color:var(--px-muted);}
/* each card's colour */
.px-site{--acc:#007a76; --tint:#eef9f8; --wash:#bfeeea;}
.px-market{--acc:#b45d14; --tint:#fff6ec; --wash:#ffd9ad;}
.px-sched{--acc:#2a62c9; --tint:#eef4ff; --wash:#c7dafc;}
.px-campday{--acc:#14866b; --tint:#ecf8f3; --wash:#bfe9d8;}
.px-recruit{--acc:#c2453a; --tint:#fff1ef; --wash:#ffcdc6;}
.px-sell{--acc:#6b4fc8; --tint:#f4f1ff; --wash:#d9cffb;}
.px-money{--acc:#0f5f7a; --tint:#eef6f9; --wash:#bfe0ec;}

/* website & registration */
.px-web{left:22px; right:22px; top:22px;}
.px-bar{display:flex; align-items:center; gap:5px; height:28px; padding:0 12px; border-bottom:1px solid var(--px-line); background:#f7f9fa; border-radius:10px 10px 0 0;}
.px-bar i{width:8px; height:8px; border-radius:50%; background:#d7dde2;}
.px-bar span{margin-left:12px; padding:2px 10px; border-radius:6px; background:#fff; border:1px solid var(--px-line); font-size:11px; color:var(--px-muted);}
.px-web-top{display:flex; align-items:center; gap:18px; padding:12px 18px; background:#0d2a3a; color:#cfe3ea; font-size:11.5px;}
.px-web-top b{margin-right:auto; color:#fff; font-size:13px; font-weight:600;}
.px-web-rows{padding:6px 18px 14px;}
.px-cr{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 52px 72px; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid #f0f3f5;}
.px-cr:last-child{border-bottom:0;}
.px-cr b{display:block; font-size:12.5px; font-weight:600;}
.px-cr small{font-size:11px;}
.px-cr strong{font-weight:600; text-align:right;}
.px-cr u{padding:5px 0; border-radius:99px; background:#007a76; color:#fff; font-size:11px; font-weight:600; text-align:center; text-decoration:none;}
.px-sp{display:grid; gap:4px;}
.px-sp i{display:block; height:4px; border-radius:4px; background:linear-gradient(90deg,#007a76 calc(var(--f)*100%), #e8eef1 0);}
.px-sp em{font-style:normal; font-size:10.5px; color:var(--px-muted);}
.px-toast{position:absolute; right:56px; bottom:18px; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:12px;
  background:#fff; border:1px solid var(--px-line); box-shadow:0 20px 40px -18px rgba(13,27,42,.4); opacity:0; transform:translateY(12px);}
.px-toast span{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#e3f6f4; color:#007a76; font-weight:700;}
.px-toast b{display:block; font-size:12px; font-weight:600;}
.px-toast small{font-size:11px;}

/* marketing */
.px-mail{left:22px; right:22px; top:22px; padding:14px 16px;}
.px-mail-h{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.px-mail-h b{font-size:13px; font-weight:600;}
.px-sent{padding:3px 9px; border-radius:99px; background:#fff1e0; color:#b45d14; font-size:11px; font-weight:600; opacity:0; transform:scale(.8);}
.px-mail-f{display:grid; grid-template-columns:40px 1fr; align-items:center; gap:8px; padding:8px 0; border-top:1px solid #f1f3f5;}
.px-mail-f b{font-weight:600;}
.px-lists{display:flex; gap:5px; flex-wrap:wrap;}
.px-lists em{padding:3px 8px; border-radius:6px; background:#fff6ec; border:1px solid #f6dcbc; font-style:normal; color:#8a4a12;}
.px-skip{color:var(--px-muted);}
.px-code{position:absolute; right:14px; bottom:-56px; display:flex; flex-direction:column; padding:10px 16px; border-radius:10px;
  background:linear-gradient(135deg,#f6b26b,#f28c6a); color:#fff; box-shadow:0 18px 30px -14px rgba(242,140,106,.7); transform:rotate(-4deg);}
.px-code span{font-size:13px; font-weight:700; letter-spacing:.08em;}
.px-code b{font-size:11px; font-weight:500; opacity:.92;}

/* scheduler */
.px-lu{left:22px; right:22px; top:22px; padding:14px 16px;}
.px-lu-h{display:flex; justify-content:space-between; margin-bottom:10px;}
.px-lu-h b{font-size:13px; font-weight:600;}
.px-lu-g{display:grid; grid-template-columns:58px repeat(6,minmax(0,1fr)); gap:4px;}
.px-lu-g .hd{font-size:10.5px; color:var(--px-muted); text-align:center;}
.px-lu-g .nm{font-size:11.5px; font-weight:600; align-self:center;}
.px-lu-g .c{padding:5px 0; border-radius:5px; background:#eef4ff; color:#2a62c9; font-size:10.5px; font-weight:600; text-align:center;}
.px-lu-g .c.p{background:#2a62c9; color:#fff;}

/* camp day */
.px-ci{left:22px; right:22px; top:22px; padding:14px 16px 8px;}
.px-ci-h{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
.px-ci-h > b{font-size:13px; font-weight:600;}
.px-ci-n{font-size:12px; color:var(--px-muted);}
.px-ci-n b{font-size:20px; font-weight:400; color:#14866b;}
.px-ci-r{display:grid; grid-template-columns:28px 1fr 20px; align-items:center; gap:10px; padding:7px 0; border-top:1px solid #f1f3f5;}
.px-ci-r i{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#ecf8f3; color:#14866b; font-size:10px; font-style:normal; font-weight:700;}
.px-ci-r em{position:relative; width:18px; height:18px; border-radius:50%; border:1.5px solid #14866b; background:#14866b;}
.px-ci-r em::after{content:""; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}

/* recruiting */
.px-rq{left:22px; right:22px; top:22px; display:grid; grid-template-columns:96px 1fr; gap:14px; padding:12px;}
.px-film{position:relative; overflow:hidden; border-radius:9px; aspect-ratio:3/4;}
.px-film img{width:100%; height:100%; object-fit:cover;}
.px-film::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55));}
.px-film small{position:absolute; z-index:1; left:6px; bottom:6px; right:6px; color:#fff; font-size:9.5px; font-weight:600;}
.px-play{position:absolute; z-index:1; left:50%; top:42%; width:30px; height:30px; margin:-15px; border-radius:50%; background:rgba(255,255,255,.92);}
.px-play::after{content:""; position:absolute; left:12px; top:9px; border-left:9px solid #c2453a; border-top:6px solid transparent; border-bottom:6px solid transparent;}
.px-rq-c{padding-top:4px;}
.px-rq-c > b{display:block; font-size:14px; font-weight:600;}
.px-rq-k{display:flex; gap:18px; margin:12px 0;}
.px-rq-k small{display:block; font-size:10.5px;}
.px-rq-k b{font-size:17px; font-weight:400;}
.px-rq-l{grid-column:1 / -1; display:grid; gap:0; margin:0 -12px -12px; border-top:1px solid #f0f3f5;}
.px-rq-l span{display:grid; grid-template-columns:26px 1fr auto; grid-template-rows:auto auto; column-gap:10px; align-items:center; padding:9px 12px; border-bottom:1px solid #f3f5f7;}
.px-rq-l i{grid-row:span 2; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#fff1ef; color:#c2453a; font-size:10px; font-style:normal; font-weight:700;}
.px-rq-l b{font-size:12px; font-weight:600;}
.px-rq-l small{grid-column:2; font-size:11px;}
.px-rq-l em{grid-column:3; grid-row:1 / span 2; font-style:normal; font-size:11.5px; color:var(--px-text);}
.px-dec em{display:inline-block; padding:5px 11px; border-radius:99px; border:1px solid #f3cfca; font-style:normal; font-size:11.5px; font-weight:600; color:#c2453a; background:#fff;}

/* store & content */
.px-sto{inset:0; background:none; border:0; box-shadow:none;}
.px-cov{position:absolute; left:22px; top:22px; display:flex; flex-direction:column; justify-content:flex-end; width:42%; aspect-ratio:16/11; padding:14px;
  border-radius:12px; color:#fff; background:#4a33a8; overflow:hidden; isolation:isolate; box-shadow:0 24px 40px -20px rgba(74,51,168,.6);}
.px-cov img{position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; object-position:50% 38%;}
.px-cov::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(40,24,110,.05) 30%,rgba(40,24,110,.85));}
.px-cov-play{position:absolute; left:50%; top:44%; width:34px; height:34px; margin:-17px; border-radius:50%; background:rgba(255,255,255,.92);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.5);}
.px-cov-play::after{content:""; position:absolute; left:13px; top:10px; border-left:10px solid #6b4fc8; border-top:7px solid transparent; border-bottom:7px solid transparent;}
.px-cov span{position:absolute; left:14px; top:14px; padding:3px 8px; border-radius:6px; background:rgba(255,255,255,.2); font-size:10.5px; font-weight:600;}
.px-cov b{font-size:15px; font-weight:600; line-height:1.2;}
.px-cov small{color:rgba(255,255,255,.8); font-size:11px;}
.px-pdf{position:absolute; left:calc(42% + 44px); top:40px; width:24%; aspect-ratio:3/4; padding:12px; border-radius:10px; background:#fff;
  border:1px solid var(--px-line); box-shadow:0 20px 36px -20px rgba(13,27,42,.4); transform:rotate(4deg);}
.px-pdf span{display:inline-block; padding:2px 7px; border-radius:5px; background:#f4f1ff; color:#6b4fc8; font-size:10px; font-weight:700;}
.px-pdf b{display:block; margin:8px 0 10px; font-size:12px; font-weight:600;}
.px-pdf i{display:block; height:4px; margin-top:6px; border-radius:3px; background:#eceff3;}
.px-pdf i:last-child{width:60%;}
.px-ad{position:absolute; right:22px; top:56px; display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
.px-ad em{padding:7px 12px; border-radius:99px; background:#fff; border:1px solid var(--px-line); font-style:normal; font-size:12px; box-shadow:0 10px 20px -14px rgba(13,27,42,.35);}
.px-ad b{margin-left:4px; font-weight:600; color:#6b4fc8;}

/* payments */
.px-pay{left:22px; right:22px; top:22px; padding:16px 18px;}
.px-pay-h small{display:block; font-size:11px;}
.px-pay-h b{font-size:26px; font-weight:300; letter-spacing:-.01em; color:#0f5f7a;}
.px-bars{display:flex; align-items:flex-end; gap:8px; height:64px; margin:12px 0 14px;}
.px-bars i{flex:1; height:var(--h); border-radius:4px 4px 0 0; background:#1a7a93; transform-origin:bottom;}
.px-pay-r{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:12px; border-top:1px solid #f0f3f5;}
.px-pay-r small{display:block; font-size:10.5px;}
.px-pay-r b{font-size:12px; font-weight:600;}

/* ---- each card plays its own small loop while it is on screen ---- */
.px-card:not(.in) *{animation-play-state:paused !important;}
.px-toast{animation:px-toast 5s 1s ease both infinite;}
@keyframes px-toast{0%,8%{opacity:0; transform:translateY(12px);} 14%,80%{opacity:1; transform:none;} 90%,100%{opacity:0; transform:translateY(-6px);}}
.px-sent{animation:px-sent 4.4s .8s ease both infinite;}
@keyframes px-sent{0%,30%{opacity:0; transform:scale(.8);} 38%,85%{opacity:1; transform:none;} 95%,100%{opacity:0;}}
.px-lists em{animation:px-pick 4.4s ease both infinite;}
.px-lists em + em{animation-delay:.25s;}
@keyframes px-pick{0%,6%{background:#fff; border-color:var(--px-line);} 14%,92%{background:#fff6ec; border-color:#f6dcbc;}}
.px-lu-g .c{animation:px-cell 6s calc(var(--i) * .35s) ease both infinite;}
@keyframes px-cell{0%{opacity:0; transform:scale(.6);} 8%,88%{opacity:1; transform:none;} 100%{opacity:0;}}
.px-ci-r em{animation:px-check 6s calc(var(--i) * .7s + .4s) ease both infinite;}
@keyframes px-check{0%,4%{background:#fff; border-color:#cfd8de;} 8%,88%{background:#14866b; border-color:#14866b;} 100%{background:#fff; border-color:#cfd8de;}}
.px-dec em{animation:px-star 4s 1s ease both infinite;}
@keyframes px-star{0%,25%{background:#fff; color:#c2453a;} 32%,85%{background:#c2453a; color:#fff;} 100%{background:#fff; color:#c2453a;}}
.px-play{animation:px-ping 2.4s ease-out infinite;}
@keyframes px-ping{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7);} 100%{box-shadow:0 0 0 14px rgba(255,255,255,0);}}
.px-ad em{animation:px-add 5s ease both infinite;}
.px-ad em.a2{animation-delay:.5s;}
@keyframes px-add{0%{opacity:0; transform:translateY(16px);} 10%,86%{opacity:1; transform:none;} 100%{opacity:0;}}
.px-pdf{animation:px-tilt 6s ease-in-out infinite alternate;}
@keyframes px-tilt{to{transform:rotate(-2deg) translateY(-6px);}}
.px-bars i{animation:px-grow 5s calc(var(--i) * .08s) cubic-bezier(.2,.8,.2,1) both infinite;}
@keyframes px-grow{0%{transform:scaleY(0);} 20%,90%{transform:none;} 100%{transform:scaleY(0);}}

/* ---------- one sign-up, everywhere ---------- */
/* desktop: the diagram and its notes sit in a centred column, not the full width */
.px-flow .pc-sh{margin:0 auto; text-align:center;}
.px-fl{position:relative; max-width:980px; height:360px; margin:48px auto 0;}
.px-wires{position:absolute; inset:0; width:100%; height:100%;}
.px-wires path{fill:none; stroke:#d6dee4; stroke-width:1.5; stroke-dasharray:4 5; vector-effect:non-scaling-stroke;}
.px-fl[data-k="0"] .w0,.px-fl[data-k="1"] .w1,.px-fl[data-k="2"] .w2,.px-fl[data-k="3"] .w3{stroke:#007a76; stroke-width:2; stroke-dasharray:none;}
.px-reg{position:absolute; z-index:1; left:50%; top:50%; width:300px; transform:translate(-50%,-50%); padding:16px 18px 8px; border-radius:16px; background:#fff;
  border:1px solid var(--px-line); box-shadow:0 2px 4px rgba(13,27,42,.04), 0 40px 70px -30px rgba(0,122,118,.5); font-size:13px;}
.px-reg::before{content:""; position:absolute; left:16px; right:16px; top:-1px; height:3px; border-radius:0 0 3px 3px; background:linear-gradient(90deg,#00bcb7,#2a7fd4);}
.px-reg-h{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.px-reg-h span{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#e3f6f4; color:#007a76; font-size:12px; font-weight:700;}
.px-reg-h b{font-weight:600;}
.px-f{display:flex; justify-content:space-between; gap:12px; margin:0 -8px; padding:9px 8px; border-top:1px solid #f1f3f5; border-radius:8px; transition:background .35s;}
.px-f small{color:var(--px-muted);}
.px-f b{font-weight:600;}
.px-fl[data-k="0"] .f0,.px-fl[data-k="1"] .f1,.px-fl[data-k="2"] .f2,.px-fl[data-k="3"] .f3{background:#e9f7f6; border-top-color:transparent;}
.px-st{position:absolute; width:250px; padding:12px 14px; border-radius:14px; background:#fff; border:1px solid var(--px-line);
  box-shadow:0 20px 40px -26px rgba(13,27,42,.4); font-size:12px; transition:transform .45s, box-shadow .45s, border-color .45s;}
.px-st > small{display:block; margin-bottom:8px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--px-muted);}
.px-st.s0{left:0; top:10px;} .px-st.s1{right:0; top:10px;} .px-st.s2{left:0; bottom:10px;} .px-st.s3{right:0; bottom:10px;}
.px-fl[data-k="0"] .s0,.px-fl[data-k="1"] .s1,.px-fl[data-k="2"] .s2,.px-fl[data-k="3"] .s3{transform:translateY(-4px); border-color:#9fdcd8;
  box-shadow:0 30px 50px -26px rgba(0,122,118,.55);}
.px-st-r{display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px solid #f2f4f6;}
.px-st-r:first-of-type{border-top:0;}
.px-st-r i{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#ecf8f3; color:#14866b; font-size:9.5px; font-style:normal; font-weight:700;}
.px-st-r span{flex:1;}
.px-st-r em{font-style:normal; font-weight:600; color:#007a76;}
.px-st-r.dim{opacity:.5;}
.px-st-r.on em{font-weight:500; font-size:11px; color:#b45d14;}
.px-st-g{display:grid; grid-template-columns:52px repeat(3,1fr); gap:4px; align-items:center;}
.px-st-g span{text-align:center; font-size:10.5px; color:var(--px-muted);}
.px-st-g span:first-child{grid-column:2;}
.px-st-g b{font-weight:600;}
.px-st-g em{padding:4px 0; border-radius:5px; background:#eef4ff; color:#2a62c9; font-style:normal; font-weight:600; text-align:center; font-size:10.5px;}
/* the caption and field tag on each station show only on phones, where the wires are gone */
.px-st-k,.px-st > small em{display:none;}
.px-keys{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:980px; margin:40px auto 0; padding:0; list-style:none; border-top:1px solid #e3e9ee;}
.px-keys li{padding:16px 16px 0 0; font-size:14.5px; line-height:1.5; color:var(--px-muted);}
.px-keys b{font-weight:600; color:var(--px-ink);}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .px-card,.px-card.w15{grid-column:span 3;}
  .px-card.w2{grid-column:span 6;}
}
@media (max-width:960px){
  .px-hero3{min-height:0;}
  .px-hero3-in{flex-direction:column; align-items:stretch; gap:28px; padding-top:300px;}
  .px-h3-ctas{width:100%; max-width:420px;}
  .px-wall{left:-10%; top:-30%; width:220%; transform:rotateY(-12deg) rotateX(10deg) rotateZ(-5deg);}
  .px-w{width:230px; height:156px;} .px-w.wide{width:340px;}
  .px-glow{background:radial-gradient(70% 40% at 80% 10%, rgba(0,188,183,.38), transparent 70%),
    linear-gradient(0deg, rgba(6,19,27,1) 0%, rgba(6,19,27,.92) 48%, rgba(6,19,27,.25) 80%, rgba(6,19,27,.15));}
  .px-hero .pc-hero-in{grid-template-columns:1fr; min-height:0;}
  /* phones and tablets: the registration on top, then a rail down the left
     with each place it shows up, lit in turn with the field it uses */
  .px-fl{height:auto; display:flex; flex-direction:column; gap:14px; max-width:560px; margin:40px auto 0; padding-left:30px;}
  .px-fl::before{content:""; position:absolute; left:9px; top:40px; bottom:48px; width:2px; border-radius:2px;
    background:linear-gradient(180deg,#00bcb7,#2a7fd4);}
  .px-wires{display:none;}
  .px-flow .pc-sh{text-align:left;}
  .px-reg{position:relative; left:auto; top:auto; transform:none; width:auto; margin:0 0 6px -30px;}
  .px-st{position:relative; inset:auto !important; width:auto; padding:14px 16px;}
  .px-st::before{content:""; position:absolute; left:-27px; top:20px; width:12px; height:12px; border-radius:50%;
    background:#fff; border:2px solid #b9d9dc; transition:border-color .4s, background .4s, box-shadow .4s;}
  .px-fl[data-k="0"] .s0::before,.px-fl[data-k="1"] .s1::before,.px-fl[data-k="2"] .s2::before,.px-fl[data-k="3"] .s3::before{
    border-color:#007a76; background:#007a76; box-shadow:0 0 0 5px rgba(0,122,118,.15);}
  .px-fl[data-k] .px-st{transform:none;}
  .px-st > small{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; color:var(--px-ink);}
  .px-st > small em{display:inline-block; padding:2px 8px; border-radius:99px; background:#eef3f6; font-style:normal; font-size:10.5px;
    font-weight:600; letter-spacing:0; text-transform:none; color:var(--px-muted); transition:background .4s, color .4s;}
  .px-fl[data-k="0"] .s0 small em,.px-fl[data-k="1"] .s1 small em,.px-fl[data-k="2"] .s2 small em,.px-fl[data-k="3"] .s3 small em{background:#e3f6f4; color:#007a76;}
  .px-st-k{display:block; margin:0 0 10px; font-size:13.5px; line-height:1.45; color:var(--px-muted);}
  .px-st .px-st-r,.px-st .px-st-g{font-size:12px;}
  /* the captions now sit on the cards; the list stays for screen readers */
  .px-keys{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0;}
}
@media (max-width:640px){
  .px-grid{grid-template-columns:1fr; gap:12px; margin-top:32px;}
  .px-card,.px-card.w2,.px-card.w15{grid-column:auto; min-height:0;}
  .px-art{height:260px; margin:16px 10px 10px;}
  .px-card-t{padding:20px 20px 0;}
  .px-web,.px-mail,.px-lu,.px-ci,.px-rq,.px-pay{left:14px; right:14px; top:16px;}
  .px-cr{grid-template-columns:minmax(0,1fr) 40px 64px; gap:10px;}
  .px-sp{display:none;}
  .px-web-top span{display:none;}
  .px-cov{left:14px; top:16px; width:52%;}
  .px-pdf{left:calc(52% + 34px); width:34%;}
  .px-ad{left:20px; right:auto; top:auto; bottom:16px; flex-direction:row;}
  .px-code{bottom:-52px; right:10px;}
  .px-toast{right:14px; bottom:14px;}
}
@media (prefers-reduced-motion:reduce){
  .px-page *,.px-page *::before,.px-page *::after{animation:none !important; transition:none !important;}
  .px-toast,.px-sent{opacity:1; transform:none;}
  .px-wrow{animation:none;}
}

/* ---------- each product card gets its own background (after Stripe's homepage cards: every frame has its own
   art, a ribbon cropped at a corner, rings, a grid, halftone dots, a soft mesh, a dark field) ---------- */
.px-art{isolation:isolate;}
.px-art::before{z-index:-1;}
.px-art::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;}
/* website & registration: a teal-to-lime ribbon sweeping up from the bottom left */
.px-site .px-art{background:linear-gradient(180deg,#f3fbfa,#fff);}
.px-site .px-art::before{background:none; -webkit-mask-image:none; mask-image:none;}
.px-site .px-art::after{left:-20%; right:-20%; top:46%; height:90%; inset:auto -20% -40% -20%; border-radius:50% 50% 0 0 / 40% 40% 0 0;
  background:linear-gradient(100deg,#00a39d 0%,#4fd1c5 35%,#b9f0a8 70%,#fff6b0 100%); transform:rotate(-8deg); opacity:.9;}
/* marketing: warm rings radiating from the bottom right, like a send going out */
.px-market .px-art{background:radial-gradient(circle at 100% 100%, #ffd9ad 0, #fff3e4 45%, #fffaf3 75%);}
.px-market .px-art::before{background:repeating-radial-gradient(circle at 100% 100%, transparent 0 26px, rgba(240,140,60,.22) 26px 27px); -webkit-mask-image:none; mask-image:none;}
/* scheduler: blue graph paper, glowing from the top right */
.px-sched .px-art{background:radial-gradient(70% 80% at 100% 0%, #c7dafc, transparent 70%), #f5f8ff;}
.px-sched .px-art::before{background:linear-gradient(rgba(42,98,201,.10) 1px, transparent 1px) 0 0/22px 22px, linear-gradient(90deg, rgba(42,98,201,.10) 1px, transparent 1px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 75%); mask-image:linear-gradient(200deg,#000,transparent 75%);}
/* camp day: green halftone dots growing toward the bottom */
.px-campday .px-art{background:linear-gradient(180deg,#f6fcf9,#e5f6ee);}
.px-campday .px-art::before{background:radial-gradient(circle, rgba(20,134,107,.32) 0 2.2px, transparent 2.6px) 0 0/14px 14px;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.4) 50%,transparent 85%); mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.4) 50%,transparent 85%);}
/* recruiting: a soft coral, pink and lilac mesh */
.px-recruit .px-art{background:
  radial-gradient(60% 70% at 15% 100%, #ffc2b8 0, transparent 70%),
  radial-gradient(55% 65% at 95% 85%, #ffb3d1 0, transparent 70%),
  radial-gradient(50% 60% at 70% 0%, #e2d6ff 0, transparent 70%), #fff7f5;}
.px-recruit .px-art::before{background:none;}
/* store & content: an orange-pink-violet ribbon cutting across the top right corner */
.px-sell .px-art{background:#faf8ff;}
.px-sell .px-art::before{background:none;}
.px-sell .px-art::after{inset:-30% -25% auto 35%; height:70%; border-radius:40%;
  background:linear-gradient(120deg,#ffb36b 0%,#ff7eb6 40%,#a98bff 75%,#6f8cff 100%); transform:rotate(18deg); filter:saturate(1.05); opacity:.85;}
/* payments & back office: a deep navy field with a dotted arc, the one dark frame on the page */
.px-money .px-art{background:radial-gradient(80% 90% at 85% 110%, #15607a, transparent 70%), linear-gradient(160deg,#0b2433,#0e3446);}
.px-money .px-art::before{background:radial-gradient(circle, rgba(159,220,235,.55) 0 1.3px, transparent 1.6px) 0 0/12px 12px;
  -webkit-mask-image:radial-gradient(70% 80% at 80% 100%, #000, transparent 70%); mask-image:radial-gradient(70% 80% at 80% 100%, #000, transparent 70%);}
/* the website card's browser sits a little narrower so its ribbon shows on both sides */
@media (min-width:641px){ .px-site .px-web{left:8%; right:8%; top:30px;} }
.px-site .px-art::after{top:30%; inset:auto -20% -55% -20%; height:120%;}

/* ---- the seven cards, Stripe-calm (Mehul 2026-10-21: "too kidsy, make it techy like Stripe, not many lines") ----
   every picture sits on the same cool neutral surface with one soft glow in its product's colour low in a corner;
   no ribbons, rings, halftones, meshes or dot fields; the UI is the picture; the promo code is a flat chip, not a sticker */
.px-grid .px-card .px-art{background:linear-gradient(180deg,#f8fafc 0%,#eef3f7 100%) !important; box-shadow:inset 0 0 0 1px rgba(13,27,42,.05);}
.px-grid .px-card .px-art::before{display:none !important;}
.px-grid .px-card .px-art::after{content:"" !important; position:absolute !important; inset:auto -18% -42% auto !important; left:auto !important; top:auto !important;
  width:78% !important; height:92% !important; border:0 !important; border-radius:50% !important; transform:none !important; animation:none !important;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--acc) 26%, transparent), transparent) !important; filter:blur(6px); opacity:1 !important;
  -webkit-mask-image:none !important; mask-image:none !important; z-index:0 !important; pointer-events:none;}
.px-grid .px-card .px-d{z-index:1;}
/* Back Office keeps the one dark surface, plain */
.px-grid .px-money .px-art{background:linear-gradient(180deg,#10232f,#0b1a24) !important; box-shadow:none;}
.px-grid .px-money .px-art::after{background:radial-gradient(closest-side, rgba(33,227,210,.22), transparent) !important;}
/* flat promo chip */
.px-grid .px-code{transform:none !important; right:16px; bottom:16px; flex-direction:row; align-items:center; gap:8px; padding:7px 12px; border-radius:8px;
  background:#fff !important; color:#0b1a24 !important; border:1px solid #e3e8ee; box-shadow:0 1px 1px rgba(13,27,42,.04), 0 10px 22px -14px rgba(13,27,42,.35) !important;}
.px-grid .px-code span{font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:12px; letter-spacing:.12em; color:#b45d14;}
.px-grid .px-code b{font-size:11px; color:#6b7280; opacity:1;}
/* the course cover: a plain dark thumbnail, no picture */
.px-grid .px-cov{background:linear-gradient(150deg,#2a3c4c,#0f1b26) !important;}
.px-grid .px-cov img{display:none;}
/* the promo chip sits just under the email card; the highlight video is a plain dark frame */
.px-grid .px-code{bottom:-48px; right:18px;}
.px-grid .px-film{background:linear-gradient(150deg,#22313f,#0d1821) !important;}
.px-grid .px-film::before,.px-grid .px-film::after{display:none !important;}
.px-card .px-film img{display:none;}
.px-card .px-film{background:linear-gradient(150deg,#22313f,#0d1821) !important;}
/* the course thumbnail: a bat and ball under a spotlight, and a paused lesson's progress */
.px-card .px-cov .px-cov-art{position:absolute; inset:0; z-index:-1; width:100%; height:100%;}
.px-cov-bar{position:absolute; left:14px; right:14px; bottom:10px; height:3px; border-radius:3px; background:rgba(255,255,255,.22); overflow:hidden;}
.px-cov-bar i{display:block; width:37%; height:100%; background:#5fd8d4;}
.px-cov-t{position:absolute; right:14px; top:14px; font-style:normal; font-size:10px; font-weight:600; color:rgba(255,255,255,.75); font-variant-numeric:tabular-nums;}
.px-card .px-cov{padding-bottom:22px;}
@media (max-width:640px){ .px-card .px-cov-play{top:36%;} .px-card .px-cov b{font-size:13.5px;} }
@media (max-width:640px){ .px-card .px-cov-play{display:none;} }

/* three cards get Stripe's home-page wash (Mehul 2026-10-21): a silky ribbon of our colours with fine fibres, rising from a
   corner behind the UI; the other cards stay on the plain surface */
.px-grid .px-site .px-art::after,.px-grid .px-recruit .px-art::after,.px-grid .px-sell .px-art::after{filter:none !important; border-radius:0 !important;
  background:repeating-linear-gradient(118deg, rgba(255,255,255,.28) 0 1px, transparent 1px 7px),
             linear-gradient(118deg, #0a9a92 0%, #2fd4c4 32%, #8fe9e1 50%, #7cc6f5 70%, #c8f26a 100%) !important;}
.px-grid .px-site .px-art::after{inset:auto -10% -48% -10% !important; width:auto !important; height:95% !important; transform:rotate(-7deg) !important;
  -webkit-mask-image:radial-gradient(120% 90% at 30% 100%, #000 30%, transparent 70%) !important; mask-image:radial-gradient(120% 90% at 30% 100%, #000 30%, transparent 70%) !important;}
.px-grid .px-recruit .px-art::after{inset:auto -30% -40% 20% !important; width:auto !important; height:90% !important; transform:rotate(-22deg) !important;
  background:repeating-linear-gradient(118deg, rgba(255,255,255,.28) 0 1px, transparent 1px 7px), linear-gradient(118deg, #1d6fd1 0%, #3fa9ff 35%, #7ff7ea 70%, #ffffff 100%) !important;
  -webkit-mask-image:radial-gradient(100% 90% at 70% 100%, #000 25%, transparent 70%) !important; mask-image:radial-gradient(100% 90% at 70% 100%, #000 25%, transparent 70%) !important;}
.px-grid .px-sell .px-art::after{inset:auto -12% -52% -12% !important; width:auto !important; height:100% !important; transform:none !important;
  background:linear-gradient(0deg, #2fd4c4 0%, #8fe9e1 30%, #c6dcf6 55%, transparent 80%) !important;
  -webkit-mask-image:radial-gradient(90% 100% at 50% 100%, #000 35%, transparent 75%) !important; mask-image:radial-gradient(90% 100% at 50% 100%, #000 35%, transparent 75%) !important;}
.px-grid .px-site .px-art::after{inset:auto -12% -12% -12% !important; height:88% !important;}
.px-grid .px-recruit .px-art::after{inset:-10% -35% -20% 25% !important; height:auto !important;}
.px-grid .px-sell .px-art::after{inset:auto -12% -14% -12% !important; height:95% !important;}
.px-grid .px-site .px-art::after{inset:8% -14% -18% -14% !important; height:auto !important;
  -webkit-mask-image:radial-gradient(150% 120% at 15% 100%, #000 45%, transparent 78%) !important; mask-image:radial-gradient(150% 120% at 15% 100%, #000 45%, transparent 78%) !important;}
.px-grid .px-recruit .px-art::after{inset:-10% -30% -20% 10% !important;
  -webkit-mask-image:radial-gradient(120% 120% at 100% 90%, #000 40%, transparent 75%) !important; mask-image:radial-gradient(120% 120% at 100% 90%, #000 40%, transparent 75%) !important;}

/* ---- cards, cleaned up after a close look at Stripe's home page (Mehul 2026-10-21: "sharp, nothing vibe coded") ----
   white cards; the picture runs to the card's edges and the card crops the UI; three cards carry one smooth gradient
   shape with a crisp curved edge (no fibres, no blurred masks); the rest are simply white */
.px-grid .px-card .px-art{margin:18px 0 0 !important; border-radius:0 !important; background:#fff !important; box-shadow:none !important;}
.px-grid .px-card .px-art::after{display:none !important;}
.px-grid .px-site .px-art::after,.px-grid .px-recruit .px-art::after,.px-grid .px-sell .px-art::after{display:block !important; filter:none !important;
  -webkit-mask-image:none !important; mask-image:none !important; transform:none !important; inset:0 !important; width:auto !important; height:auto !important; border-radius:0 !important;}
.px-grid .px-site .px-art::after{background:linear-gradient(200deg, #b9f3ec 0%, #5fd8d4 28%, #14a59b 58%, #0b7f79 100%) !important;
  clip-path:ellipse(95% 62% at 12% 108%);}
.px-grid .px-recruit .px-art::after{background:linear-gradient(160deg, #cfe4ff 0%, #6fb0f5 35%, #2f7fd6 70%, #1d4fa8 100%) !important;
  clip-path:ellipse(62% 85% at 108% 96%);}
.px-grid .px-sell .px-art::after{background:linear-gradient(180deg, rgba(255,255,255,0) 30%, #d6f6f2 48%, #8fe9e1 64%, #2fbfb2 82%, #0b8f88 100%) !important;}
/* Back Office keeps its one dark panel, edge to edge too */
.px-grid .px-money .px-art{background:linear-gradient(180deg,#10232f,#0b1a24) !important;}
.px-grid .px-recruit .px-art::after{clip-path:ellipse(78% 100% at 115% 100%);}

/* ---- four of Stripe's home-page card backgrounds, exact in form, in our colours (Mehul 2026-10-21) ----
   Website: the "accept payments" wedge, a smooth gradient plane with a crisp diagonal edge filling the lower left
   Store: the "billing" field, white at the top deepening into colour at the bottom
   Recruiting: the "agentic commerce" speckle ring (images/art/px-speckle.svg) with its faint wash
   Payments: the "card issuing" soft iridescent haze around the UI; the rest stay white */
.px-grid .px-card .px-art::after{display:none !important;}
.px-grid .px-site .px-art::after,.px-grid .px-sell .px-art::after,.px-grid .px-recruit .px-art::after,.px-grid .px-money .px-art::after{
  display:block !important; content:"" !important; position:absolute !important; inset:0 !important; width:auto !important; height:auto !important;
  transform:none !important; filter:none !important; border-radius:0 !important; -webkit-mask-image:none !important; mask-image:none !important; clip-path:none; z-index:0 !important;}
.px-grid .px-site .px-art::after{
  background:linear-gradient(196deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 18%),
             linear-gradient(212deg, #2fd4c4 0%, #5fd8d4 18%, #14a59b 42%, #2f8fd8 70%, #6f7cf0 100%) !important;
  clip-path:polygon(100% 14%, 100% 100%, 0 100%, 0 78%, 40% 52%) !important;}
.px-grid .px-sell .px-art::after{
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 14%, #dff7f4 30%, #9be9e2 44%, #46cdc2 58%, #2f9fd6 76%, #5a6ff0 100%) !important;}
.px-grid .px-recruit .px-art::after{background:url(/images/art/px-speckle.svg) center/cover no-repeat !important;}
.px-grid .px-money .px-art{background:#fff !important;}
.px-grid .px-money .px-art::after{
  background:radial-gradient(38% 40% at 86% 22%, rgba(95,216,212,.55), transparent 70%),
             radial-gradient(34% 36% at 92% 70%, rgba(124,198,245,.5), transparent 70%),
             radial-gradient(30% 34% at 8% 85%, rgba(200,242,106,.35), transparent 70%),
             radial-gradient(40% 40% at 12% 18%, rgba(143,233,225,.35), transparent 70%) !important;
  filter:blur(18px) !important;}
.px-grid .px-money .px-pay{box-shadow:0 1px 2px rgba(13,27,42,.06), 0 30px 60px -28px rgba(13,27,42,.35) !important;}
.px-grid .px-site .px-art::after{clip-path:polygon(100% 6%, 100% 100%, 0 100%, 0 64%) !important;}
.px-grid .px-recruit .px-rq{transform:scale(.8); transform-origin:50% 45%;}
.px-grid .px-recruit .px-art::after{background-size:115% 115% !important;}

/* ---------- hero, designer pass (Mehul 2026-10-22: the dark teal stage and glow read as AI, the square outline buttons did
   not match the site; keep the tilted wall idea). A light stage like the rest of the site: the wall is crisp white product
   screens only (no tinted photo tiles), on a cool off-white, fading out under the headline. Ink headline with the brand
   teal second line, and the site's own pill buttons. ---------- */
.px-hero3{background:#f4f7f9; color:#0b1a24;}
.px-w{border:0; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 24px 48px -28px rgba(13,40,60,.28), 0 2px 6px rgba(13,40,60,.05);}
.px-w.ph img{filter:none;}
.px-w.ph span{background:rgba(255,255,255,.92); color:#0b1a24; box-shadow:0 1px 3px rgba(13,27,42,.12);}
.px-w.ui{color:#56677a; background:#fff;}
.px-w-h > b{color:#0b1a24;}
.px-w-h small{color:#62707c;}
.px-w-h small.ok, .px-w-h .n{color:#007a76;}
.px-w-lu em{color:#0b1a24;}
.px-w-lu i{background:#eef3f6; color:#56677a;}
.px-w-lu i.p{background:#007a76; color:#fff;}
.px-w.ui strong{color:#0b1a24; font-weight:400;}
.px-w-bars i{background:#a7d6d1;}
.px-w-bars i:last-child{background:#007a76;}
.px-w-r, .px-w-c, .px-w-f{border-top:1px solid #eef1f4;}
.px-w-r i{background:#e7f5f3; color:#00605d;}
.px-w-r em{border-color:#cfd8dd;}
.px-w-r em.on{background:#007a76; border-color:#007a76;}
.px-w-c b, .px-w-f b{color:#0b1a24;}
.px-w-c small, .px-w-f small{color:#62707c;}
.px-w-c u{background:#e7f5f3; color:#00605d;}
.px-w.fld circle{fill:#007a76;}
.px-w.fld path, .px-w.fld line{stroke:#c9d5db;}
.px-glow{background:
    linear-gradient(90deg, #f4f7f9 0%, rgba(244,247,249,.94) 30%, rgba(244,247,249,.35) 58%, rgba(244,247,249,0) 78%),
    linear-gradient(0deg, #f4f7f9 0%, rgba(244,247,249,.9) 26%, rgba(244,247,249,0) 60%);}
.px-h3{color:#0b1a24;}
.px-h3 span{color:#007a76;}
.px-h3-copy p{color:#56677a;}
.px-h3-ctas{flex-direction:row; width:auto; gap:12px; align-self:flex-end;}
.px-sq{justify-content:center; gap:8px; height:40px; padding:0 18px; border:1px solid #d5dde3; border-radius:999px; background:#fff; color:#0b1a24; font-size:14.5px; white-space:nowrap;}
.px-sq:hover{border-color:#b8c4cc; background:#fff;}
.px-sq-solid{background:#007a76; border-color:#007a76; color:#fff;}
.px-sq-solid:hover{background:#00605d; border-color:#00605d;}
.px-sq:focus-visible{outline:2px solid #007a76;}
@media (max-width:960px){
  .px-glow{background:linear-gradient(0deg, #f4f7f9 0%, rgba(244,247,249,.95) 50%, rgba(244,247,249,.2) 82%, rgba(244,247,249,0));}
  .px-h3-ctas{align-self:flex-start; flex-wrap:wrap;}
}

/* hero wall, round 2 (Mehul 2026-10-22: cards a little smaller, bring the coloured images back) */
@media (min-width:961px){
  .px-w{width:250px; height:168px;} .px-w.wide{width:390px;}
  .px-w.ui{padding:12px 14px; font-size:11px;}
  .px-w-bars{height:66px;} .px-w.fld svg{height:112px;} .px-w.ui strong{font-size:24px;}
  .px-w-r{padding:5px 0;} .px-w-c{padding:6px 0;}
}
/* Store & Content card, lighter (Mehul 2026-10-23: too dark, felt AI): the wash rising from the bottom stays in pale teals
   and stops at a mid teal, with no blue or violet; the video tile is a flat ink instead of a navy-violet blend */
.px-grid .px-sell .px-art::after{background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 22%, #eef9f7 42%, #cdeee9 62%, #9fdcd5 82%, #6cc7bd 100%) !important;}
/* the video course tile shows a real photo (Luke on the mound) with a soft dark fade at the foot for the title, instead of
   the drawn navy-violet scene */
.px-grid .px-cov{background:#1b2a35 !important;}
.px-grid .px-cov img{display:block !important; position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 30%;}
.px-grid .px-cov .px-cov-art{display:none !important;}
.px-grid .px-cov::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,26,36,.15) 0%, rgba(11,26,36,0) 35%, rgba(11,26,36,.7) 100%);}
.px-grid .px-sell .px-art::after{background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, #f2faf9 50%, #dcf2ee 72%, #bfe6e0 100%) !important;} /* a little lighter still */

/* the course cover has no photo (Mehul 2026-10-30: no team photos in product cards): a flat dark cover, as in the product grid */
.px-cov{background:linear-gradient(150deg,#2a3c4c,#0f1b26);}