/* =====================================================================
   SOLUTIONS (SC-534) - /solutions/ and /solutions/<sport>/
   Uses the product page template (page-category.css) for the hero type,
   headings, buttons and closing call to action, and the drawn camp website
   from Website & Registration (.pk-brand-art in page-website-registration.css),
   filled with each sport. This file adds:
     .so-hero      sport hero: copy beside that sport's camp website
     .so-camps     the camps a program runs, with prices by position
     .so-band      a three-photo mosaic band
     .fx           every feature, laid out the way that sport lines up
     .so-faq       questions, title left and accordion right
     .so-others    the other sports, as a row of links
     overview      a reel of sports behind the title, sport tiles by group,
                   and the products every sport gets
   ===================================================================== */
.so-page{--so-ink:#0d1b2a; --so-text:#41505d; --so-muted:#62707c; --so-line:#e3e8ee; --so-teal:#007a76;}
.so-page .pc-sh{font-weight:500;}
.so-page .pc-sh b{font-weight:500;}
.so-arr{width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

/* ---------- sport hero ---------- */
.so-hero-art{padding:0 !important;}
.so-art{padding:0 0 64px; animation:so-rise .9s cubic-bezier(.2,.7,.2,1) both;}
@keyframes so-rise{from{opacity:0; transform:translateY(24px);}}

/* ---------- sections ---------- */
.so-sec{padding:clamp(72px,9vw,120px) 0;}
.so-camps{background:#fff;}
.so-faq{background:#fff;}

/* camps, with prices by position */
.so-camp-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:44px 0 0; padding:0; list-style:none;}
.so-camp{overflow:hidden; border:1px solid var(--so-line); border-radius:16px; background:#fff; transition:box-shadow .35s, border-color .35s, transform .35s;}
.so-camp:hover{transform:translateY(-3px); border-color:#d3dbe2; box-shadow:0 24px 50px -32px rgba(13,27,42,.35);}
.so-camp img{display:block; width:100%; aspect-ratio:16/10; height:auto; object-fit:cover;}
.so-camp-in{padding:18px 20px 20px;}
.so-camp small{font-size:13px; color:var(--so-muted);}
.so-camp h3{margin:4px 0 14px; font-size:18px; font-weight:600; color:var(--so-ink);}
.so-opts{display:grid; gap:6px;}
.so-opts span{display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border:1px solid #e9eef2; border-radius:10px; font-size:14px; color:var(--so-text);}
.so-opts span:first-child{border-color:var(--so-teal); background:#f2fbfa;}
.so-opts b{font-weight:600; color:var(--so-ink); font-variant-numeric:tabular-nums;}

/* three-photo band */
.so-band{position:relative; isolation:isolate; overflow:hidden; min-height:clamp(320px,36vw,460px); display:flex; align-items:flex-end; background:#0b1d2a;}
.so-mosaic{position:absolute; inset:0; z-index:-1; display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:4px;}
.so-mosaic img{width:100%; height:100%; object-fit:cover; filter:saturate(.95);}
.so-mosaic::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,20,30,.88) 0%, rgba(8,20,30,.35) 45%, rgba(8,20,30,.05));}
.so-band-in{width:100%; padding-bottom:clamp(36px,5vw,64px);}
.so-band-t{margin:0; font-family:var(--pc-display); font-size:clamp(34px,4.4vw,64px); line-height:.98; text-transform:uppercase; color:#fff;}
.so-band-t span{display:block; margin-top:14px; font-family:inherit; font-size:clamp(15px,1.4vw,18px); line-height:1.5; text-transform:none; color:#cfe1e7; font-family:Archivo,system-ui,sans-serif;}

/* FAQ */
.so-faq-in{display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(32px,6vw,96px); align-items:start;}
.so-qs{border-top:1px solid #dfe5ea;}
.so-q{border-bottom:1px solid #dfe5ea;}
.so-q summary{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 0; list-style:none; cursor:pointer; font-size:16px; font-weight:600; color:var(--so-ink);}
.so-q summary::-webkit-details-marker{display:none;}
.so-q summary i{position:relative; flex:none; width:22px; height:22px; border-radius:50%; background:#e7f6f5;}
.so-q summary i::before,.so-q summary i::after{content:""; position:absolute; left:6px; right:6px; top:10px; height:2px; border-radius:2px; background:var(--so-teal); transition:transform .25s;}
.so-q summary i::after{transform:rotate(90deg);}
.so-q[open] summary i::after{transform:rotate(0);}
.so-q summary:focus-visible{outline:2px solid var(--so-teal); outline-offset:4px; border-radius:4px;}
.so-q p{max-width:44em; margin:-6px 0 20px; font-size:15px; line-height:1.6; color:var(--so-text);}

/* other sports */
.so-others{padding:28px 0; background:#f6f9fc; border-top:1px solid #edf1f4;}
.so-others .pc-wrap{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.so-others span{font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--so-muted);}
.so-others ul{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;}
.so-others a{display:inline-block; padding:6px 13px; border:1px solid var(--so-line); border-radius:99px; background:#fff; font-size:14px; font-weight:500; color:var(--so-text); text-decoration:none;
  transition:border-color .2s, color .2s;}
.so-others a:hover{border-color:var(--so-teal); color:var(--so-teal);}

/* ---------- overview ---------- */
.so-hero-all{padding:clamp(72px,9vw,120px) 0 clamp(40px,5vw,64px);}
.so-hero-all::after{display:none;}
.so-all-in{position:relative; max-width:880px; text-align:center;}
.so-all-in .pc-intro{margin-left:auto; margin-right:auto;}
/* a slow reel of every sport behind the title, faded out under the words */
.so-reel{position:relative; margin-top:clamp(40px,5vw,64px); height:clamp(170px,18vw,240px); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
.so-reel-t{display:flex; align-items:flex-start; gap:12px; width:max-content; height:calc(100% - 26px);}
.so-reel-t img{flex:none; width:260px; height:100%; object-fit:cover; border-radius:14px;}
.so-reel-t img:nth-child(odd){transform:translateY(26px);}
@media (prefers-reduced-motion:no-preference){ .so-reel-t{animation:so-reel 80s linear infinite;} }
@keyframes so-reel{to{transform:translateX(-50%);}}
.so-sports{background:#fff;}
.so-group + .so-group{margin-top:56px;}
.so-group-h{margin:0 0 18px; font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--so-muted);}
.so-tiles{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none;}
.so-tiles.n2{grid-template-columns:repeat(2,minmax(0,1fr));}
.so-tiles.n3{grid-template-columns:repeat(3,minmax(0,1fr));}
.so-tile{position:relative; isolation:isolate; display:flex; align-items:flex-end; aspect-ratio:4/5; overflow:hidden; border-radius:16px; text-decoration:none; background:#0b1d2a;}
.so-tiles.n2 .so-tile,.so-tiles.n3 .so-tile{aspect-ratio:16/10;}
.so-tile img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.so-tile::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(8,20,30,.85), rgba(8,20,30,.1) 60%);}
.so-tile:hover img{transform:scale(1.05);}
.so-tile-in{display:flex; flex-direction:column; gap:3px; padding:18px;}
.so-tile b{font-size:20px; font-weight:600; color:#fff;}
.so-tile small{font-size:13.5px; color:#cfe1e7;}
.so-tile-go{position:absolute; top:14px; right:14px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--so-ink);
  opacity:0; transform:translateY(-4px); transition:opacity .25s, transform .25s;}
.so-tile:hover .so-tile-go,.so-tile:focus-visible .so-tile-go{opacity:1; transform:none;}
.so-tile:focus-visible{outline:3px solid var(--so-teal); outline-offset:3px;}
.so-same{background:#f6f9fc; border-top:1px solid #edf1f4;}
.so-same-in{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,96px); align-items:center;}
.so-prods{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; padding:0; list-style:none; border-top:1px solid #dfe5ea;}
.so-prods li{border-bottom:1px solid #dfe5ea;}
.so-prods a{display:flex; justify-content:space-between; padding:16px 0; margin-right:24px; font-size:16px; font-weight:600; color:var(--so-ink); text-decoration:none;}
.so-prods a::after{content:"\2192"; color:var(--so-teal); transition:transform .2s;}
.so-prods a:hover::after{transform:translateX(3px);}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .so-tiles{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:900px){
  .so-camp-grid{grid-template-columns:1fr;}
  .so-faq-in,.so-same-in{grid-template-columns:1fr;}
  .so-camp{display:grid; grid-template-columns:140px 1fr;}
  .so-camp img{aspect-ratio:auto; height:100%;}
}
@media (max-width:640px){
  .so-tiles,.so-tiles.n2,.so-tiles.n3{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .so-tiles.n3 li:last-child:nth-child(odd),.so-tiles li:last-child:nth-child(odd){grid-column:1 / -1;}
  .so-tile,.so-tiles.n2 .so-tile,.so-tiles.n3 .so-tile{aspect-ratio:4/5;}
  .so-tiles li:last-child:nth-child(odd) .so-tile{aspect-ratio:16/9;}
  .so-tile b{font-size:17px;} .so-tile small{font-size:12.5px;}
  .so-camp{grid-template-columns:110px 1fr;}
  .so-camp-in{padding:14px 14px 16px;}
  .so-camp h3{font-size:16px; margin-bottom:10px;}
  .so-opts span{padding:7px 10px; font-size:13px;}
  .so-mosaic{grid-template-columns:1fr 1fr;}
  .so-mosaic img.m2{display:none;}
  .so-prods{grid-template-columns:1fr;}
  .so-reel-t img{width:160px;}
  .so-art{padding-bottom:0;}
}
@media (prefers-reduced-motion:reduce){
  .so-page *{animation:none !important; transition:none !important;}
}

/* =====================================================================
   Every tool a program gets (.so-fx): plain cards, icon, name and one line,
   each linking to its product page. The sport shows only as a small tag on
   each card (its position, number, count or lane) and a faint drawing of
   its field behind the section.
   ===================================================================== */
.so-fx{position:relative; isolation:isolate; overflow:hidden; background:#f6f9fc; border-top:1px solid #edf1f4; border-bottom:1px solid #edf1f4;}
.fx-back{position:absolute; z-index:-1; right:-6%; top:50%; width:min(820px,70%); aspect-ratio:16/10; transform:translateY(-50%); opacity:.55;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent); mask-image:radial-gradient(closest-side,#000 40%,transparent);}
.fx-back svg{width:100%; height:100%; fill:none; stroke:#bcd3da; stroke-width:1.2;}
.fx-back svg *{vector-effect:non-scaling-stroke;}
.fx-cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:44px 0 0; padding:0; list-style:none;}
.fx-c a{position:relative; display:flex; flex-direction:column; height:100%; overflow:hidden; border:1px solid #e3e9ee; border-radius:16px; background:#fff;
  text-decoration:none; transition:border-color .3s, box-shadow .3s, transform .3s;}
.fx-c a:hover{border-color:#cfdbe2; box-shadow:0 26px 50px -30px rgba(13,27,42,.4); transform:translateY(-3px);}
.fx-c a:focus-visible{outline:2px solid var(--so-teal); outline-offset:3px;}
.fx-t{padding:14px 16px 16px;}
.fx-t b{display:block; font-size:15.5px; font-weight:600; color:var(--so-ink);}
.fx-t small{display:block; margin-top:2px; font-size:13.5px; line-height:1.4; color:var(--so-muted);}
/* the picture: a tinted panel with a small drawn screen in it */
.fx-v{position:relative; height:150px; overflow:hidden; display:grid; place-items:center; padding:16px;
  background:radial-gradient(120% 120% at 100% 0%, var(--w2), transparent 60%), linear-gradient(160deg, var(--w1), #fff 120%);}
.fx-v::after{content:""; position:absolute; inset:0; background:radial-gradient(rgba(13,27,42,.07) 1px, transparent 1.3px) 0 0/12px 12px;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 60%); mask-image:linear-gradient(200deg,#000,transparent 60%); pointer-events:none;}
.t-teal{--w1:#d9f3f1; --w2:#a5e6e0; --a:#007a76;} .t-navy{--w1:#dbe8f3; --w2:#a9c8e6; --a:#0f5f7a;} .t-amber{--w1:#fdebd4; --w2:#ffcf98; --a:#b4650f;}
.t-mint{--w1:#daf2e7; --w2:#a9e2c8; --a:#14866b;} .t-coral{--w1:#fde1dd; --w2:#ffb9ae; --a:#c2453a;} .t-violet{--w1:#e8e1fd; --w2:#c8b8fb; --a:#6b4fc8;}
.t-sky{--w1:#dcecfd; --w2:#a9cdfb; --a:#2a62c9;} .t-gold{--w1:#fff0cf; --w2:#ffd27a; --a:#a26300;}
.fx-v > em{position:absolute; z-index:2; top:10px; right:10px; padding:2px 7px; border-radius:6px; background:rgba(255,255,255,.85); font-style:normal; font-size:10.5px; font-weight:700; color:var(--a);}
.fx-v > div{position:relative; z-index:1; width:100%; max-width:220px; font-size:11.5px; color:var(--so-ink); transition:transform .45s cubic-bezier(.2,.8,.2,1);}
.fx-c a:hover .fx-v > div{transform:translateY(-4px) scale(1.03);}
.fx-v img{display:block; width:100%; object-fit:cover;}
.v-card{padding:12px; border-radius:10px; background:#fff; box-shadow:0 1px 1px rgba(13,27,42,.05), 0 14px 26px -16px rgba(13,27,42,.4);}
.v-card > b{display:block; margin-bottom:6px; font-size:12px; font-weight:600;}
.v-card small{font-size:10.5px; color:var(--so-muted);}
.v-opt{display:flex; align-items:center; gap:6px; margin-top:5px; padding:5px 7px; border:1px solid #e6ebef; border-radius:7px;}
.v-opt i{width:10px; height:10px; border-radius:50%; border:1.5px solid #c3ccd3;}
.v-opt.on{border-color:var(--a);} .v-opt.on i{border-color:var(--a); background:var(--a);}
.v-opt em{margin-left:auto; font-style:normal; font-weight:600;}
.v-card strong{display:block; font-size:20px; font-weight:300; color:var(--a);}
.v-bars{display:flex; align-items:flex-end; gap:4px; height:34px; margin-top:6px;}
.v-bars i{flex:1; height:var(--h); border-radius:2px 2px 0 0; background:var(--a); opacity:.85;}
.v-mail{position:relative;} .v-mail b{margin:2px 0 8px !important;}
.v-ok{position:absolute; top:10px; right:10px; padding:2px 6px; border-radius:99px; background:#fff1e0; color:var(--a); font-size:10px; font-weight:700;}
.v-line{display:block; height:5px; border-radius:3px; background:#edf0f3; margin-top:5px;} .v-line.s{width:60%;}
.v-head{display:flex; justify-content:space-between; margin-bottom:4px;} .v-head b{font-size:12px; font-weight:600;} .v-head em{font-style:normal; color:var(--a); font-weight:600;}
.v-row{display:flex; align-items:center; justify-content:space-between; padding:4px 0; border-top:1px solid #f1f3f5;}
.v-row i{font-style:normal;} .v-row u{width:12px; height:12px; border-radius:50%; border:1.5px solid #c3ccd3;} .v-row u.on{background:var(--a); border-color:var(--a);}
.v-row em{font-style:normal; font-weight:600;} .v-row em.t{color:var(--a);}
.v-rec{display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:center;}
.v-rec img{height:62px; border-radius:7px;}
.v-rec b{display:block; font-size:12px;} .v-rec u{display:inline-block; margin-top:5px; padding:2px 7px; border-radius:99px; background:var(--a); color:#fff; font-size:10px; font-weight:600; text-decoration:none;}
.v-site,.v-course,.v-post{position:relative; overflow:hidden; border-radius:10px; background:#fff; box-shadow:0 14px 26px -16px rgba(13,27,42,.45);}
.v-site .v-bar{display:block; height:12px; background:#f1f4f6;}
.v-site img{height:86px;}
.v-site span,.v-course span{position:absolute; left:10px; bottom:9px; color:#fff;}
.v-site small,.v-course small{display:block; font-size:9.5px; opacity:.85;}
.v-site b,.v-course b{font-family:var(--pc-display); font-size:16px; font-weight:400; text-transform:uppercase; line-height:1;}
.v-site::after,.v-course::after{content:""; position:absolute; inset:12px 0 0; background:linear-gradient(0deg,rgba(8,20,30,.7),transparent 60%);}
.v-site span,.v-course span{z-index:1;}
.v-course img{height:104px;}
.v-play{position:absolute; z-index:1; left:50%; top:42%; width:28px; height:28px; margin:-14px; border-radius:50%; background:rgba(255,255,255,.92);}
.v-play::after{content:""; position:absolute; left:11px; top:8px; border-left:8px solid var(--a); border-top:6px solid transparent; border-bottom:6px solid transparent;}
.v-chips{display:grid; gap:6px; justify-items:start;}
.v-chips span{padding:6px 10px; border-radius:99px; background:#fff; box-shadow:0 8px 16px -10px rgba(13,27,42,.4); white-space:nowrap;}
.v-chips span:nth-child(2){margin-left:22px;} .v-chips span:nth-child(3){margin-left:8px;}
.v-chips b{margin-left:4px; color:var(--a);}
.v-code{display:inline-flex; flex-direction:column; justify-self:center; width:auto !important; padding:12px 18px; border-radius:12px; color:#fff; transform:rotate(-4deg);
  background:linear-gradient(135deg,#f6b26b,#f28c6a); box-shadow:0 14px 26px -12px rgba(242,140,106,.7);}
.v-code b{font-size:16px; letter-spacing:.08em;} .v-code small{font-size:10.5px; opacity:.9;}
.v-post img{height:70px;}
.v-post span{display:block; padding:8px 10px;}
.v-post small{font-size:9.5px; font-weight:700; text-transform:uppercase; color:var(--a);} .v-post b{display:block; font-size:12px; line-height:1.25;}
.v-tax small{display:block; margin-top:6px; color:var(--a) !important; font-weight:600;}
.v-lu{display:grid; grid-template-columns:repeat(4,1fr); gap:4px;}
.v-lu i{padding:5px 0; border-radius:5px; background:#fff3dc; color:#9d6000; font-style:normal; font-size:10.5px; font-weight:700; text-align:center;}
.v-lu i.p{background:#f2a65a; color:#fff;}
.fx-more a{justify-content:flex-end; border-style:dashed; background:none;}
.fx-more b{color:#007a76;}
.fx-go{position:absolute; top:16px; right:16px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#e7f6f5; color:#007a76;}
.fx-more a:hover .fx-go{background:#007a76; color:#fff;}
.fx-cards li{transition:opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1);}
.fx-cards.wait li{opacity:0; transform:translateY(10px);}
@media (max-width:1100px){ .fx-cards{grid-template-columns:repeat(3,minmax(0,1fr));} .fx-more{display:none;} }
@media (max-width:760px){
  .fx-cards{grid-template-columns:1fr 1fr; gap:10px; margin-top:32px;}
  .fx-v{height:120px; padding:10px;}
  .fx-v > div{font-size:10.5px;}
  .fx-t{padding:11px 12px 13px;} .fx-t b{font-size:14.5px;} .fx-t small{font-size:12.5px;}
  .v-site img{height:66px;} .v-course img{height:84px;} .v-post img{height:52px;}
  .v-card{padding:9px;} .v-card strong{font-size:16px;} .v-bars{height:24px;}
  .v-rec{grid-template-columns:40px 1fr;} .v-rec img{height:48px;}
  .v-chips span:nth-child(2){margin-left:10px;}
  .fx-back{width:120%; right:-40%; opacity:.4;}
}
@media (prefers-reduced-motion:reduce){ .fx-cards.wait li{opacity:1; transform:none;} }

/* ---- sport hero, after Hudl (uses .px-hero3 from page-products-overview.css): the title keeps the site's
   teal on every sport; each sport gets its own two-colour glow behind the wall, --g and --g2 on the section ---- */
.so-hero3 .px-glow{background:
    radial-gradient(55% 65% at 86% 26%, rgba(var(--g),.34), transparent 70%),
    radial-gradient(45% 55% at 62% 92%, rgba(var(--g2),.26), transparent 70%),
    radial-gradient(30% 40% at 100% 90%, rgba(var(--g),.18), 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%);}
.so-hero3 .px-h3 span{max-width:15em; font-size:clamp(36px,4.6vw,68px); color:#5fd8d4;}
.so-crumbs3 ol{display:flex; gap:8px; margin:0 0 18px; padding:0; list-style:none; font-size:14px; font-weight:500; color:#9fb6c0;}
.so-crumbs3 li + li::before{content:"/"; margin-right:8px; color:#5f7885;}
.so-crumbs3 a{color:#cfe1e7; text-decoration:none;}
.so-crumbs3 a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px;}
@media (max-width:960px){
  .so-hero3 .px-glow{background:radial-gradient(70% 40% at 80% 10%, rgba(var(--g),.34), transparent 70%), radial-gradient(60% 30% at 10% 30%, rgba(var(--g2),.24), 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));}
}
.fx-more a{justify-content:flex-end; border-style:dashed; background:none;}
.fx-more b{color:#007a76;}
.fx-go{position:absolute; top:20px; right:20px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#e7f6f5; color:#007a76;}
.fx-more a:hover .fx-go{background:#007a76; color:#fff;}
@media (max-width:1100px){ .fx-more{display:none;} }

/* =====================================================================
   The camps, drawn differently for every sport (.ct-*). Each one shows the
   camp's name, date, ages, length and a price for each of the sport's two
   player types.
   ===================================================================== */
.so-camps .pc-sh{margin-bottom:44px;}
.cp{display:grid; gap:5px;}
.cp > span{display:flex; justify-content:space-between; gap:10px; font-size:13.5px; color:var(--so-text);}
.cp b{font-weight:600; color:var(--so-ink); font-variant-numeric:tabular-nums;}
.ct-d{display:flex; flex-direction:column; align-items:center; justify-content:center; width:54px; height:58px; border-radius:12px; background:#f2f6f8; line-height:1;}
.ct-d small{font-size:11px; font-weight:700; text-transform:uppercase; color:var(--so-muted);}
.ct-d b{margin-top:3px; font-size:22px; font-weight:400; color:var(--so-ink);}
.ct-n b{display:block; font-size:16px; font-weight:600; color:var(--so-ink);} .ct-n small{font-size:13.5px; color:var(--so-muted);}
.so-camps ul,.so-camps ol{margin:0; padding:0; list-style:none;}

/* baseball: ticket stubs */
.ct-tix{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;}
.ct-tix-i > a{display:grid; grid-template-columns:1fr 128px; border-radius:14px; background:#fff; border:1px solid #e3e9ee; overflow:hidden; box-shadow:0 20px 40px -32px rgba(13,27,42,.4);}
.ct-tix-m{position:relative; min-height:190px; display:flex; align-items:flex-end;}
.ct-tix-m img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ct-tix-m::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,20,30,.85),rgba(8,20,30,.1) 70%);}
.ct-tix-m span{position:relative; z-index:1; padding:16px; color:#fff;}
.ct-tix-m small{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9fe3df;}
.ct-tix-m b{display:block; margin:4px 0; font-family:var(--pc-display); font-size:24px; font-weight:400; line-height:1; text-transform:uppercase;}
.ct-tix-m em{font-style:normal; font-size:12.5px; color:#d6e5ea;}
.ct-tix-s{position:relative; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:14px; border-left:2px dashed #d5dde3; background:#fbfcfd;}
.ct-tix-s::before,.ct-tix-s::after{content:""; position:absolute; left:-9px; width:16px; height:16px; border-radius:50%; background:#fff; border:1px solid #e3e9ee;}
.ct-tix-s::before{top:-9px;} .ct-tix-s::after{bottom:-9px;}
.ct-tix-s small{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--so-muted);}
.ct-tix-s .cp > span{flex-direction:column; gap:0; font-size:12px;}
.ct-tix-s .cp b{font-size:17px; font-weight:400;}

/* softball: trading cards */
.ct-tc{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;}
.ct-tc-i > a{padding:12px 12px 16px; border-radius:16px; background:linear-gradient(160deg,#fff,#fff4f8); border:2px solid #f3c9dc; box-shadow:0 20px 40px -32px rgba(194,53,122,.5);}
.ct-tc-ph{position:relative; overflow:hidden; border-radius:10px; aspect-ratio:16/10;}
.ct-tc-ph img{width:100%; height:100%; object-fit:cover;}
.ct-tc-ph span{position:absolute; left:10px; top:10px; padding:3px 9px; border-radius:6px; background:#c2357a; color:#fff; font-size:12px; font-weight:700;}
.ct-tc-i > b{display:block; margin:12px 4px 8px; font-family:var(--pc-display); font-size:22px; font-weight:400; text-transform:uppercase; color:var(--so-ink);}
.ct-tc-i dl{display:grid; grid-template-columns:1fr 1fr; margin:0 4px 10px; border-top:1px solid #f3d7e4; border-bottom:1px solid #f3d7e4;}
.ct-tc-i dl div{padding:8px 0;} .ct-tc-i dl div + div{padding-left:12px; border-left:1px solid #f3d7e4;}
.ct-tc-i dt{font-size:10.5px; font-weight:700; text-transform:uppercase; color:#c2357a;} .ct-tc-i dd{margin:2px 0 0; font-size:14px; font-weight:600;}
.ct-tc-i .cp{margin:0 4px;}

/* soccer: fixtures */
.ct-fx{border-top:2px solid var(--so-ink);}
.ct-fx li > a{display:grid; grid-template-columns:54px minmax(0,1.4fr) minmax(0,1fr); align-items:center; gap:24px; padding:16px 0; border-bottom:1px solid #e3e9ee;}
.ct-fx .ct-d{background:#e8f8ef;} .ct-fx .ct-d b{color:#1f8a4c;}
.ct-fx .cp{grid-auto-flow:column; gap:20px;} .ct-fx .cp > span{flex-direction:column; gap:0; font-size:12.5px;}
.ct-go{padding:9px 16px; border-radius:99px; border:1px solid #1f8a4c; color:#1f8a4c; font-size:13.5px; font-weight:600;}

/* football: the summer as a field */
.ct-yd-f{position:relative; height:90px; border-radius:12px; background:repeating-linear-gradient(90deg,#2f8a4a 0 10%,#33924f 10% 20%); overflow:hidden;}
.ct-yd-f > i{position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:rgba(255,255,255,.75); font-style:normal; font-family:var(--pc-display); font-size:16px; color:#fff;}
.ct-yd-f > i::after{content:attr(style); display:none;}
.ct-yd-f > i{display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px; text-indent:0; line-height:1;}
.ct-yd-ez{position:absolute; top:0; bottom:0; width:10%; display:grid; place-items:center; background:#0f5f7a; color:#fff; font-family:var(--pc-display); font-size:16px; letter-spacing:.05em; text-transform:uppercase; writing-mode:vertical-rl; transform:rotate(180deg);}
.ct-yd-ez.l{left:0;} .ct-yd-ez.r{right:0; transform:none;}
.ct-yd-f em{position:absolute; top:50%; width:18px; height:18px; margin:-9px; border-radius:50%; background:#ff8a3d; box-shadow:0 0 0 5px rgba(255,138,61,.35);}
.ct-yd-c{position:relative; height:200px; margin-top:14px !important;}
.ct-yd-c li > a{position:absolute; left:var(--x); top:0; width:min(280px,30%); transform:translateX(-50%); padding:14px 16px; border:1px solid #e3e9ee; border-radius:14px; background:#fff; box-shadow:0 20px 40px -32px rgba(13,27,42,.4);}
.ct-yd-c li > a::before{content:""; position:absolute; left:50%; top:-15px; width:2px; height:15px; background:#ff8a3d;}
.ct-yd-c small{font-size:12px; font-weight:700; text-transform:uppercase; color:#c45a14;}
.ct-yd-c b{display:block; margin:2px 0; font-size:16px; font-weight:600;}
.ct-yd-c li > a > span:not(.ct-k){display:block; margin-bottom:8px; font-size:13px; color:var(--so-muted);}

/* lacrosse: a calendar */
.ct-cal{display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:24px; align-items:start;}
.ct-cal-m{padding:16px; border:1px solid #e3e9ee; border-radius:14px; background:#fff;}
.ct-cal-m > b{display:block; margin-bottom:10px; font-size:14px; font-weight:600;}
.ct-cal-w,.ct-cal-g{display:grid; grid-template-columns:repeat(7,30px); gap:3px; text-align:center;}
.ct-cal-w span{font-size:10.5px; font-weight:700; color:var(--so-muted);}
.ct-cal-g i{display:grid; place-items:center; height:28px; border-radius:7px; font-style:normal; font-size:12px; color:var(--so-text);}
.ct-cal-g i.on{background:#7b8cff; color:#fff; font-weight:700;}
.ct-cal-l li > a{display:grid; grid-template-columns:54px minmax(0,1fr); gap:6px 16px; align-items:center; padding:14px 0; border-bottom:1px solid #e3e9ee;}
.ct-cal-l li > a:first-child{padding-top:0;}
.ct-cal-l .ct-d{grid-row:span 2; background:#eef0ff;} .ct-cal-l .ct-d b{color:#4a5bd6;}
.ct-cal-l .cp{grid-auto-flow:column; justify-content:start; gap:18px;}

/* basketball: jerseys */
.ct-jr{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;}
.ct-jr li > a{padding:20px 18px; border:1px solid #e3e9ee; border-radius:16px; background:#fff; text-align:center;}
.ct-jr-s{position:relative; width:120px; margin:0 auto 12px;}
/* sleeveless basketball jerseys: a deep scoop neck and armholes with piping, side panels and a hem stripe */
.ct-jr-s svg{display:block; width:100%; overflow:visible;}
.ct-jr-s .jb{fill:#ff7a2f; stroke:#c9561a; stroke-width:1.5;}
.ct-jr-s .jp{fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round;}
.ct-jr-s .js{fill:none; stroke:#ffb27a; stroke-width:7;}
.ct-jr-s .jh{fill:none; stroke:#fff; stroke-width:3;}
.ct-jr li:nth-child(2) .jb{fill:#123f6e; stroke:#0a2a4c;} .ct-jr li:nth-child(2) .jp,.ct-jr li:nth-child(2) .jh{stroke:#f2c14e;} .ct-jr li:nth-child(2) .js{stroke:#2a6aa8;}
.ct-jr li:nth-child(3) .jb{fill:#f7f8fa; stroke:#c9d1d8;} .ct-jr li:nth-child(3) .jp,.ct-jr li:nth-child(3) .jh{stroke:#ff7a2f;} .ct-jr li:nth-child(3) .js{stroke:#e3e8ec;}
.ct-jr-s span{position:absolute; left:0; right:0; top:50px; display:flex; flex-direction:column; align-items:center; color:#fff; line-height:1;}
.ct-jr li:nth-child(3) .ct-jr-s span{color:var(--so-ink);}
.ct-jr-s small{font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;}
.ct-jr-s b{font-family:var(--pc-display); font-size:44px; font-weight:400;}
.ct-jr-n{display:block; font-size:17px; font-weight:600;} .ct-jr li > a > small{display:block; margin:2px 0 12px; font-size:13px; color:var(--so-muted);}
.ct-jr .cp{text-align:left;}

/* volleyball: wristbands */
.ct-wb{display:grid; gap:14px;}
.ct-wb li > a{position:relative; display:grid; grid-template-columns:40px auto minmax(0,1fr) auto auto; align-items:center; gap:18px; padding:14px 24px 14px 0; border-radius:99px; color:#3a2f00;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.25) 0 2px, transparent 2px 14px), linear-gradient(90deg,#ffd23f,#ffe58a);}
.ct-wb li.w1 > a{background:repeating-linear-gradient(115deg, rgba(255,255,255,.25) 0 2px, transparent 2px 14px), linear-gradient(90deg,#7fd1ff,#bfe6ff); color:#08324a;}
.ct-wb li.w2 > a{background:repeating-linear-gradient(115deg, rgba(255,255,255,.25) 0 2px, transparent 2px 14px), linear-gradient(90deg,#ff9fbf,#ffd0df); color:#4a0b22;}
.ct-wb-clip{height:100%; min-height:40px; border-radius:99px 0 0 99px; background:rgba(13,27,42,.18);}
.ct-wb-d{font-family:var(--pc-display); font-size:20px; text-transform:uppercase;}
.ct-wb b{font-size:16px; font-weight:700;} .ct-wb li > a > small{font-size:13px; opacity:.8;}
.ct-wb .cp{grid-auto-flow:column; gap:16px;} .ct-wb .cp > span,.ct-wb .cp b{color:inherit;} .ct-wb .cp > span{flex-direction:column; gap:0; font-size:12px;}

/* cheer: rosettes */
.ct-rb{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;}
.ct-rb li > a{padding:22px 20px; border:1px solid #f4d3dc; border-radius:16px; background:#fff; text-align:center;}
.ct-rb-r{position:relative; width:96px; height:120px; margin:0 auto 10px;}
.ct-rb-r span{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; width:96px; height:96px; border-radius:50%;
  background:radial-gradient(circle,#fff 0 52%,transparent 53%), repeating-conic-gradient(#ff4f7b 0 10deg,#ff8aa6 10deg 20deg); line-height:1;}
.ct-rb-r small{font-size:10px; font-weight:700; text-transform:uppercase; color:#c2214f;} .ct-rb-r b{font-family:var(--pc-display); font-size:30px; font-weight:400; color:var(--so-ink);}
.ct-rb-r i{position:absolute; top:78px; width:22px; height:42px; background:#ff4f7b; clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);}
.ct-rb-r i:nth-of-type(1){left:26px; transform:rotate(12deg);} .ct-rb-r i:nth-of-type(2){right:26px; transform:rotate(-12deg); background:#c2214f;}
.ct-rb li > a > b{display:block; font-size:17px; font-weight:600;} .ct-rb li > a > small{display:block; margin:2px 0 12px; font-size:13px; color:var(--so-muted);}
.ct-rb .cp{text-align:left;}

/* dance: a playbill */
.ct-pb{max-width:820px; margin:0 auto; padding:34px 40px 26px; border-radius:6px; background:#fbf6ec; border:1px solid #eadfc8; box-shadow:0 30px 60px -40px rgba(60,40,10,.45);}
.ct-pb-h{text-align:center; padding-bottom:18px; border-bottom:3px double #c9b48a;}
.ct-pb-h small{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8a6d33;}
.ct-pb-h b{display:block; margin:6px 0 2px; font-family:var(--pc-display); font-size:40px; font-weight:400; text-transform:uppercase; color:#2a1e0a;}
.ct-pb-h span{font-family:Georgia,serif; font-style:italic; color:#6d5a3a;}
.ct-pb li > a{display:grid; grid-template-columns:70px auto 1fr auto; grid-template-rows:auto auto; column-gap:12px; align-items:baseline; padding:18px 0; border-bottom:1px solid #eadfc8;}
.ct-pb li > a > small{font-family:Georgia,serif; font-style:italic; color:#8a6d33;}
.ct-pb li > a > b{font-size:17px; font-weight:600; color:#2a1e0a;}
.ct-pb-dots{border-bottom:2px dotted #c9b48a; transform:translateY(-4px);}
.ct-pb li > a > em{font-style:normal; font-weight:600; color:#2a1e0a;}
.ct-pb-m{grid-column:2; font-size:13px; color:#6d5a3a;}
.ct-pb .cp{grid-column:3 / span 2; grid-auto-flow:column; justify-content:end; gap:18px;} .ct-pb .cp > span{gap:6px; font-size:12.5px; color:#6d5a3a;}

/* track: a heat sheet */
.ct-hs{border:1px solid #e3e9ee; border-radius:14px; overflow:hidden; background:#fff;}
.ct-hs-h,.ct-hs li > a{display:grid; grid-template-columns:70px minmax(0,1.6fr) 90px 90px 110px minmax(0,1.3fr); align-items:center; gap:14px; padding:12px 20px;}
.ct-hs-h{background:#c2453a; color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;}
.ct-hs li > a{border-top:1px solid #f1f3f6; font-size:14px;}
.ct-hs li:nth-child(even) > a{background:#fbf7f6;}
.ct-hs-n{display:grid; place-items:center; width:34px; height:34px; border-radius:8px; background:#fff1ef; color:#c2453a; font-family:var(--pc-display); font-size:20px;}
.ct-hs li > a b{font-size:15.5px; font-weight:600;}
.ct-hs .cp{grid-auto-flow:column; gap:16px;} .ct-hs .cp > span{flex-direction:column; gap:0; font-size:12px;}

@media (max-width:1000px){
  .ct-tix,.ct-tc,.ct-jr,.ct-rb{grid-template-columns:1fr; max-width:520px; margin:0 auto !important;}
  .ct-cal{grid-template-columns:auto auto;} .ct-cal-l{grid-column:1 / -1;}
  .ct-yd-c{height:auto;} .ct-yd-c li > a{position:static; width:auto; transform:none; margin-top:12px;} .ct-yd-c li > a::before{display:none;}
  .ct-hs-h{display:none;} .ct-hs li > a{grid-template-columns:44px 1fr; gap:4px 14px;} .ct-hs li > a > *:nth-child(n+3){grid-column:2;}
  .ct-hs li > a > span:not(.ct-hs-n){font-size:13px; color:var(--so-muted);}
}
@media (max-width:760px){
  .ct-tix-i > a{grid-template-columns:1fr 112px;}
  .ct-fx li > a{grid-template-columns:54px 1fr; gap:10px 16px;} .ct-fx .cp,.ct-fx .ct-go{grid-column:2;} .ct-fx .ct-go{justify-self:start;}
  .ct-cal{grid-template-columns:1fr; justify-items:center;} .ct-cal-l{justify-self:stretch;}
  .ct-wb li > a{grid-template-columns:28px 1fr; gap:4px 14px; padding:14px 20px 14px 0; border-radius:24px;}
  .ct-wb li > a > *:nth-child(n+3){grid-column:2;}
  .ct-wb-clip{grid-row:span 4; border-radius:24px 0 0 24px;}
  .ct-pb{padding:24px 18px 18px;} .ct-pb-h b{font-size:30px;}
  .ct-pb li > a{grid-template-columns:52px 1fr auto;} .ct-pb-dots{display:none;} .ct-pb .cp{grid-column:2 / span 2; justify-content:start;}
  .ct-yd-f{height:64px;} .ct-yd-f > i{font-size:12px;}
}
/* mixed items: every entry is a link, with a small tag naming the service */
.ct-a{display:block; height:100%; color:inherit; text-decoration:none;}
.ct-a:focus-visible{outline:2px solid var(--so-teal); outline-offset:3px; border-radius:12px;}
.ct-k{display:inline-block; margin-bottom:4px; padding:2px 8px; border-radius:99px; background:#e7f6f5; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#007a76;}
.ct-tix-i,.ct-tc-i,.ct-jr li > a,.ct-rb li > a,.ct-yd-c li > a{transition:transform .25s, box-shadow .25s;}
.ct-tix-i:hover,.ct-tc-i:hover,.ct-jr li > a:hover,.ct-rb li > a:hover{transform:translateY(-3px); box-shadow:0 26px 50px -30px rgba(13,27,42,.4);}
.ct-tc-i p{margin:0 4px 10px; font-size:13.5px; color:var(--so-muted);}
.ct-tc-i .cp{margin:0 4px; padding-top:10px; border-top:1px solid #f3d7e4;}
.ct-tix-s .cp > span{flex-direction:column; gap:0;}
.ct-tix-s .cp b{font-size:15px;}
.ct-cal-g i.pr{background:#ffe7c2; color:#9a5412; font-weight:700;}
.ct-fx li > a:hover,.ct-cal-l li > a:hover,.ct-hs li > a:hover,.ct-pb li > a:hover{background:#f7fafb;}
.ct-hs-h,.ct-hs li > a{grid-template-columns:70px minmax(0,1.6fr) 120px 90px minmax(0,1.5fr) !important;}
@media (max-width:1000px){ .ct-hs li > a{grid-template-columns:44px 1fr !important;} }
.ct-yd-c li > a{min-height:0;}
.ct-yd-c{height:230px;}
.ct-yd-c li > a:hover{transform:translateX(-50%) translateY(-3px); box-shadow:0 26px 50px -30px rgba(13,27,42,.4);}
@media (max-width:1000px){ .ct-yd-c li > a:hover{transform:translateY(-3px);} }
.ct-d.ic svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.ct-fx .ct-d.ic{color:#1f8a4c;} .ct-cal-l .ct-d.ic{color:#4a5bd6;}

/* drawn plates (images/art/) are already dark, so the hero wall shows them at full strength */
.so-hero3 .px-w.ph img[src^="/images/art/"]{filter:brightness(1.25) contrast(1.05);}

/* sport heroes, light (Mehul 2026-10-22: after the /products/ and /solutions/ heroes went light, the sport pages kept the dark
   stage under the new white cards and dark title, so the title vanished). Same light stage: cool off-white, the white wall
   fading out under the title, only a faint wash of the sport's own colour top right. */
.so-hero3 .px-glow{background:
    radial-gradient(45% 60% at 92% 18%, rgba(var(--g),.10), transparent 70%),
    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%);}
.so-hero3 .px-h3 span{color:#007a76;}
.so-crumbs3 ol{color:#62707c;}
.so-crumbs3 li + li::before{color:#c3ccd3;}
.so-crumbs3 a{color:#56677a;}
.so-crumbs3 a:hover{color:#0b1a24;}
.so-hero3 .px-w.ph img[src^="/images/art/"]{filter:none;}
@media (max-width:960px){
  .so-hero3 .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));}
}

/* ---- /solutions/ hero, the sport band (Mehul 2026-10-22): ten playing surfaces side by side, one SideCoach camp card over
   them; the card stays, the sport under it changes ---- */
.so-band-hero{padding:clamp(64px,8vw,104px) 0 clamp(48px,6vw,80px); background:linear-gradient(180deg,#f4f7f9 0%,#fff 100%);}
.sb-in{text-align:center;}
.sb-h{color:#0b1a24;} .sb-h span{color:#007a76;}
.sb-p{max-width:34em; margin:20px auto 0; font-size:clamp(16px,1.4vw,19px); line-height:1.55; color:#56677a;}
.sb{position:relative; margin-top:clamp(40px,5vw,60px);}
.sb-strips{display:flex; gap:6px; height:clamp(300px,30vw,400px); margin:0; padding:0; list-style:none;}
.sb-s{flex:1 1 0; min-width:0; transition:flex-grow .7s cubic-bezier(.3,.7,.2,1);}
.sb-s.on{flex-grow:4.2;}
.sb-s a{position:relative; display:block; height:100%; overflow:hidden; border-radius:14px; text-decoration:none; box-shadow:0 0 0 1px rgba(13,27,42,.06);}
.sb-s img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .9s ease;}
.sb-s.on img{transform:scale(1);}
.sb-s span{position:absolute; left:50%; bottom:16px; transform:translateX(-50%) rotate(-90deg); transform-origin:center; white-space:nowrap;
  padding:4px 10px; border-radius:6px; background:rgba(255,255,255,.92); color:#0b1a24; font-size:12.5px; font-weight:600; transition:transform .5s, bottom .5s;}
.sb-s span{bottom:52px;}
.sb-s.on span{bottom:16px; left:16px; transform:none;}
.sb-s a:focus-visible{outline:2px solid #007a76; outline-offset:3px;}
.sb-card{position:absolute; left:50%; top:50%; z-index:2; width:min(360px,80%); transform:translate(-50%,-50%); padding:18px 20px 20px; border-radius:16px;
  background:#fff; text-align:left; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 40px 70px -30px rgba(10,30,45,.55), 0 4px 12px rgba(10,30,45,.08); pointer-events:none;}
.sb-c-h{display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid #eef1f4;}
.sb-c-logo{display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#007a76; color:#fff; font-weight:700; font-size:14px;}
.sb-c-h b{display:block; font-size:13px; color:#0b1a24;} .sb-c-h small{display:block; font-size:11px; color:#62707c;}
.sb-c-sp{margin-left:auto; padding:3px 9px; border-radius:20px; background:#e7f5f3; color:#00605d; font-style:normal; font-size:11px; font-weight:600;}
.sb-c-t{margin-top:14px; font-size:18px; font-weight:600; letter-spacing:-.01em; color:#0b1a24;}
.sb-c-m{display:flex; gap:6px; margin-top:4px; font-size:13px; color:#56677a;} .sb-c-m b{color:#0b1a24; font-weight:600;}
.sb-c-p{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 16px; padding:0; list-style:none;}
.sb-c-p li{padding:3px 8px; border-radius:6px; background:#f3f6f8; color:#56677a; font-size:11px; font-weight:600;}
.sb-c-p li.lu{background:#e7f5f3; color:#00605d;}
.sb-c-btn{display:block; padding:10px; border-radius:999px; background:#007a76; color:#fff; text-align:center; font-size:14px; font-weight:600;}
.sb-card [data-f]{transition:opacity .25s;} .sb-card.swap [data-f]{opacity:0;}
@media (max-width:760px){
  .sb-strips{gap:4px; height:220px;}
  .sb-s span{display:none;} .sb-s.on span{display:block; left:10px; bottom:10px;}
  .sb-card{position:relative; left:auto; top:auto; transform:none; width:auto; margin:-40px 12px 0;}
  .sb-s.on{flex-grow:5;}
}
@media (prefers-reduced-motion:reduce){ .sb-s, .sb-s img, .sb-s span{transition:none;} }

/* sport band, round 2 (Mehul 2026-10-22: "too busy", "card placement"): the closed strips are plain soft tints of each
   sport's surface, no drawings and no labels; only the open sport shows its field and name. The card moves out of the
   band and sits beside it. */
.sb{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:center;}
.sb-strips{gap:5px; height:clamp(280px,26vw,360px);}
.sb-s a{background:var(--c); box-shadow:none;}
.sb-s:not(.on) a::after{content:""; position:absolute; inset:0; background:rgba(255,255,255,.62); transition:background .4s;}
.sb-s:not(.on) a:hover::after{background:rgba(255,255,255,.42);}
.sb-s img{opacity:0; transition:opacity .5s ease, transform .9s ease;}
.sb-s.on img{opacity:1;}
.sb-s span, .sb-s span{opacity:0; bottom:16px; left:16px; transform:none; transition:opacity .3s;}
.sb-s.on span{opacity:1; transition-delay:.35s;}
.sb-s{transition:flex-grow .7s cubic-bezier(.3,.7,.2,1);}
.sb-s.on{flex-grow:5;}
.sb-card{position:relative; left:auto; top:auto; width:auto; transform:none; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 30px 60px -32px rgba(10,30,45,.4);}
@media (max-width:960px){
  .sb{grid-template-columns:minmax(0,1fr);}
  .sb-card{max-width:420px; width:100%; margin:0 auto;}
}
@media (max-width:760px){ .sb-strips{height:200px; gap:3px;} .sb-card{margin:0 auto;} .sb-s.on span{left:10px; bottom:10px;} }

/* ---- /solutions/ hero, the sport index (Mehul 2026-10-22, replaces the sport band): the sport names as the hero, set big in
   the display face, quiet grey; the lit one in ink with a teal rule, and a small field frame floating beside it ---- */
.so-index-hero{padding:clamp(64px,8vw,104px) 0 clamp(48px,6vw,72px); background:#fff;}
.sx-h{margin:0; font-size:15px; font-weight:600; letter-spacing:.02em; color:#0b1a24;}
.sx-h span{color:#007a76;}
.sx{position:relative; margin-top:clamp(20px,3vw,32px);}
.sx-l{display:flex; flex-wrap:wrap; align-items:baseline; gap:.06em .42em; margin:0; padding:0; list-style:none;
  font-family:var(--pc-display); font-size:clamp(44px,7vw,104px); line-height:1.02; text-transform:uppercase; letter-spacing:.2px;}
.sx-l li + li::before{content:"/"; margin-right:.42em; color:#e1e7eb; font-size:.6em; vertical-align:.18em;}
.sx-n{position:relative; color:#c4ced5; text-decoration:none; transition:color .35s ease;}
.sx-n::after{content:""; position:absolute; left:0; right:0; bottom:.04em; height:.06em; border-radius:2px; background:#007a76; transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.3,.7,.2,1);}
.sx-n.on{color:#0b1a24;} .sx-n.on::after{transform:none;}
.sx-n:focus-visible{outline:2px solid #007a76; outline-offset:4px; border-radius:4px;}
.sx-f{position:absolute; left:0; top:0; z-index:2; width:220px; border-radius:12px; overflow:hidden; background:#fff; pointer-events:none; opacity:0;
  box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 28px 56px -26px rgba(10,30,45,.45); transition:transform .55s cubic-bezier(.3,.7,.2,1), opacity .3s;}
.sx-f.ready{opacity:1;}
.sx-f-im{position:relative; aspect-ratio:16/10;}
.sx-f-im img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s;}
.sx-f-im img.on{opacity:1;}
.sx-f-c{padding:10px 12px 12px;} .sx-f-c b{display:block; font-size:13px; color:#0b1a24;} .sx-f-c small{display:block; font-size:11.5px; color:#62707c;}
.sx-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-top:clamp(32px,4vw,48px); padding-top:24px; border-top:1px solid #eef1f4;}
.sx-foot p{max-width:34em; margin:0; font-size:clamp(16px,1.4vw,19px); line-height:1.55; color:#56677a;}
.sx-foot .px-sq{flex:none;}
@media (max-width:760px){
  .sx-f{display:none;}
  .sx-foot{flex-direction:column; align-items:flex-start;}
}
/* sport index, round 2: no slashes (they started lines when the names wrapped), a lighter grey, and the frame keeps to its
   own column on the right, sliding up and down to the lit name's line so it never covers another name */
.sx{padding-right:260px;}
.sx-l{gap:0 .34em; font-size:clamp(44px,6.4vw,96px);}
.sx-l li + li::before{content:none;}
.sx-n{color:#d3dbe0;}
.sx-f{left:auto; right:0; width:228px;}
@media (max-width:760px){ .sx{padding-right:0;} .sx-l{font-size:clamp(40px,12vw,56px);} }

/* ---- /solutions/ hero, camp site switcher (Mehul 2026-10-22, fourth pass) ---- */
.so-switch-hero{padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px); background:linear-gradient(180deg,#f4f7f9,#fff);}
.cs-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,72px); align-items:center;}
.cs-h{color:#0b1a24;} .cs-h span{color:#007a76;}
.cs-copy p{max-width:30em; margin:20px 0 0; font-size:clamp(16px,1.4vw,19px); line-height:1.55; color:#56677a;}
.cs-chips{display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; padding:0; list-style:none; max-width:520px;}
.cs-chip{padding:8px 14px; border:1px solid #d5dde3; border-radius:999px; background:#fff; color:#0b1a24; font:inherit; font-size:14px; font-weight:500; cursor:pointer; transition:background .2s, color .2s, border-color .2s;}
.cs-chip:hover{border-color:#b8c4cc;}
.cs-chip[aria-pressed="true"]{background:#007a76; border-color:#007a76; color:#fff;}
.cs-chip:focus-visible{outline:2px solid #007a76; outline-offset:2px;}
.cs-site{overflow:hidden; border-radius:14px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.07), 0 40px 80px -40px rgba(10,30,45,.45), 0 4px 12px rgba(10,30,45,.05);}
.cs-bar{display:flex; align-items:center; gap:6px; padding:10px 14px; background:#f3f6f8; border-bottom:1px solid #e6ebef;}
.cs-bar i{width:9px; height:9px; border-radius:50%; background:#d5dde3;}
.cs-bar span{flex:1; margin-left:10px; padding:4px 10px; border-radius:6px; background:#fff; font-size:11.5px; color:#62707c;} .cs-bar b{font-weight:500; color:#56677a;}
.cs-nav{display:flex; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid #eef1f4;}
.cs-logo{display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:#14365a; color:#fff; font-size:12px; font-weight:700;}
.cs-nav > b{font-size:13.5px; color:#0b1a24;}
.cs-links{display:flex; gap:16px; margin-left:auto; font-size:12px; color:#56677a;} .cs-links i{font-style:normal;}
.cs-ban{position:relative; aspect-ratio:16/6.4; overflow:hidden; background:#0b1a24;}
.cs-ban img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease;}
.cs-ban img.on{opacity:1;}
.cs-ban::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(6,18,26,.62), rgba(6,18,26,.08) 65%);}
.cs-ban-t{position:absolute; left:20px; bottom:18px; z-index:1; color:#fff;}
.cs-ban-t small{display:block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; opacity:.85;}
.cs-ban-t b{display:block; margin-top:2px; font-family:var(--pc-display); font-weight:400; font-size:clamp(24px,2.4vw,34px); text-transform:uppercase; letter-spacing:.3px;}
.cs-list{padding:6px 18px 14px;}
.cs-row{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid #eef1f4;}
.cs-row:last-child{border-bottom:0;}
.cs-row b{display:block; font-size:14px; font-weight:600; color:#0b1a24;}
.cs-row small{display:block; margin-top:2px; font-size:12px; color:#62707c;} .cs-row small i{font-style:normal;}
.cs-row em{font-style:normal; font-size:14px; font-weight:600; color:#0b1a24; font-variant-numeric:tabular-nums;}
.cs-row u{padding:7px 14px; border-radius:999px; background:#007a76; color:#fff; font-size:12.5px; font-weight:600; text-decoration:none;}
.cs-site [data-f]{transition:opacity .22s;} .cs-site.swap [data-f]{opacity:0;}
.cs-go{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:14px; font-weight:500; color:#56677a; text-decoration:none;}
.cs-go b{font-weight:600; color:#007a76;} .cs-go svg{width:8px; height:13px; fill:none; stroke:#007a76; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s;}
.cs-go:hover svg{transform:translateX(3px);} .cs-go:hover span{color:#0b1a24;}
@media (max-width:960px){ .cs-in{grid-template-columns:minmax(0,1fr);} }
@media (max-width:560px){ .cs-links{display:none;} .cs-row{grid-template-columns:minmax(0,1fr) auto;} .cs-row u{display:none;} .cs-list{padding:4px 14px 10px;} }

/* switcher hero background: the Payments hero's lit teal band, running behind the camp site from lower left to upper right */
.so-switch-hero{position:relative; isolation:isolate; overflow:hidden;}
.cs-band{position:absolute; z-index:-1; left:-10%; right:-25%; top:58%; height:240px; overflow:hidden; transform:rotate(-9deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 40px 90px -30px rgba(0,122,118,.45), 0 -20px 80px -40px rgba(33,227,210,.5);}
.cs-band svg{position:absolute; top:0; left:0; width:200%; height:100%; filter:saturate(1.25) brightness(1.06); will-change:transform;}
.cs-band::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(13,27,42,.10));}
@media (prefers-reduced-motion:no-preference){ .cs-band svg{animation:cs-flow 30s linear infinite;} }
@keyframes cs-flow{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.cs-go{position:relative; padding:6px 12px; margin-left:-12px; border-radius:999px; background:rgba(255,255,255,.9);}
@media (max-width:960px){ .cs-band{top:auto; bottom:6%; height:180px; left:-30%; right:-30%;} }
/* the band was cut by the section's bottom edge: give it room so the whole ribbon shows */
.so-switch-hero{padding-bottom:clamp(150px,15vw,230px);}
.cs-band{top:auto; bottom:clamp(30px,4vw,60px); height:230px;}
@media (max-width:960px){ .so-switch-hero{padding-bottom:110px;} .cs-band{bottom:30px; height:170px;} }

/* small recruit thumbnail on the sport pages (Mehul 2026-10-23): no image, just the text */
.v-rec{grid-template-columns:1fr;} .v-rec img{display:none;}

/* lower-page visuals without art plates (2026-10-26): flat product UI only, no gradients or glows */
.v-site .v-hero{display:block; height:86px; background:#0f2a3a;}
.v-site::after,.v-course::after{display:none;}
.v-course{height:104px; background:#14212b;}
.v-course::before{content:""; position:absolute; left:10px; right:10px; bottom:6px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--a) 35%,rgba(255,255,255,.18) 35%);}
.v-course span{bottom:15px;}
.v-post span{padding:10px;}
.v-post .v-line{margin-top:7px;}
.so-band{min-height:0; padding-top:clamp(56px,7vw,96px); background:#0b1d2a;}
.ct-tix-m{background:#0f2a3a;}
.ct-tix-m::after{display:none;}
.tx-lu > i{position:absolute; top:16px; left:16px; right:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:5px;}
.tx-lu u{padding:4px 0; border-radius:5px; background:rgba(255,255,255,.08); color:#c9dbe2; font-size:11px; font-weight:700; text-align:center; text-decoration:none;}
.tx-lu u:nth-child(4n+1){background:#007a76; color:#fff;}
.ct-tix-m.tx-vid{background:#14212b;}
.tx-play{position:absolute; left:50%; top:38%; width:46px; height:46px; margin:-23px; border-radius:50%; background:#fff;}
.tx-play::after{content:""; position:absolute; left:18px; top:14px; border-left:14px solid #14212b; border-top:9px solid transparent; border-bottom:9px solid transparent;}
.tx-bar{position:absolute; left:16px; right:16px; bottom:10px; height:3px; border-radius:2px; background:linear-gradient(90deg,#5fd8d4 30%,rgba(255,255,255,.18) 30%);}
.ct-tc-ph{background:#fff; border:1px solid #f3d7e4;}
.tc-date{display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff4f8;}
.tc-date b{font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#c2357a;}
.tc-date strong{font-family:var(--pc-display); font-size:64px; font-weight:400; line-height:1; color:var(--so-ink);}
.tc-form,.tc-add{display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:40px 12px 12px;}
.tc-form i,.tc-add i{display:flex; justify-content:space-between; align-items:center; padding:7px 10px; border:1px solid #e3e9ee; border-radius:7px; font-style:normal; font-size:12.5px; font-weight:600; color:var(--so-ink);}
.tc-form small{font-size:11.5px; font-weight:500; color:var(--so-muted);}
.tc-add i::before{content:""; width:13px; height:13px; margin-right:8px; border:1.5px solid #c7d1d8; border-radius:3px;}
.tc-add i.on::before{background:#c2357a; border-color:#c2357a;}
.tc-add i b{margin-left:auto; font-weight:600; color:var(--so-muted);}
@media (max-width:760px){ .v-site .v-hero{height:66px;} .v-course{height:84px;} }
/* lighter cards (Mehul 2026-10-26: the dark navy blocks read as AI): white ticket faces, ink text, product-UI greys */
.ct-tix-m,.ct-tix-m.tx-vid{background:#fff;}
.ct-tix-m span{color:var(--so-ink);}
.ct-tix-m small{color:#007a76;}
.ct-tix-m em{color:var(--so-muted);}
.tx-lu u{background:#f4f7f9; border:1px solid #e3e9ee; color:#56677a;}
.tx-lu u:nth-child(4n+1){background:#e3f4f2; border-color:#bfe3df; color:#007a76;}
.ct-tix-m.tx-vid::before{content:""; position:absolute; left:16px; right:16px; top:14px; height:84px; border-radius:8px; background:#eef2f5;}
.tx-play{top:56px; width:38px; height:38px; margin:-19px; background:#0b1a24;}
.tx-play::after{left:15px; top:12px; border-left-width:11px; border-left-color:#fff; border-top-width:7px; border-bottom-width:7px;}
.tx-bar{top:92px; bottom:auto; left:26px; right:26px; background:linear-gradient(90deg,#007a76 30%,#d5dde3 30%);}
.v-site .v-hero{background:#e3f4f2;}
.v-site span{color:var(--so-ink);} .v-site small{color:#007a76; opacity:1;}
.v-course{background:#eef2f5;}
.v-course span{color:var(--so-ink);} .v-course small{opacity:1; color:var(--so-muted);}
.v-course .v-play{background:#0b1a24;} .v-course .v-play::after{border-left-color:#fff;}
.v-course::before{background:linear-gradient(90deg,var(--a) 35%,#d5dde3 35%);}
/* visual on top, text below, in flow so nothing overlaps at any width */
.ct-tix-m{flex-direction:column; align-items:stretch; justify-content:flex-start;}
.ct-tix-m > span{margin-top:auto;}
.tx-lu > i{position:static; margin:16px 16px 0;}
.ct-tix-m.tx-vid::before{position:relative; left:auto; right:auto; top:auto; flex:none; margin:14px 16px 0;}
/* ticket faces v3 (Mehul 2026-10-26: white looked empty, navy looked AI). Each face is printed on the
   flat stock colour its product has in the 12-tool grid below (Registration teal, Scheduler gold,
   Courses violet) and carries a real snippet of that screen. No gradients, no glows. */
.ct-tix-m{gap:14px; padding:16px 16px 0;}
.ct-tix-m > span:last-child{padding:0 0 16px;}
.tk-camp{background:#d9f3f1;} .tk-sched{background:#fff0cf;} .tk-course{background:#e8e1fd;}
.tk-camp small{color:#007a76;} .tk-sched small{color:#8a5300;} .tk-course small{color:#5a3fb5;}
.ct-tix-m.tk-camp em,.ct-tix-m.tk-sched em,.ct-tix-m.tk-course em{color:#47596a;}
.tk-snip{display:block; background:#fff; border-radius:8px; box-shadow:0 1px 2px rgba(13,27,42,.08); font-size:11.5px; color:var(--so-ink);}
.tk-snip i{font-style:normal;} .tk-snip u{text-decoration:none;}
/* camp: a tear-off date and the day's times */
.tk-camp .tk-snip{display:flex; align-items:stretch; overflow:hidden;}
.tk-date{display:flex; flex-direction:column; align-items:center; justify-content:center; width:64px; flex:none; background:#007a76; color:#fff;}
.tk-date i{font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;}
.tk-date b{margin:0; font-family:var(--pc-display); font-size:34px; font-weight:400; line-height:1;}
.tk-when{display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-content:center; padding:10px 12px;}
.tk-when i{color:var(--so-muted);} .tk-when b{margin:0; font-family:inherit; font-size:12px; font-weight:600; text-transform:none; text-align:right;}
/* scheduler: the top of a printed lineup card */
.tk-card{padding:8px 10px; font-family:"JetBrains Mono",ui-monospace,monospace;}
.tk-h{display:flex; justify-content:space-between; padding-bottom:5px; border-bottom:1px solid #eadfca; font-family:Archivo,system-ui,sans-serif;}
.tk-h b{margin:0; font-family:inherit; font-size:12px; font-weight:700; text-transform:none;} .tk-h i{font-size:10.5px; color:var(--so-muted);}
.tk-r{display:grid; grid-template-columns:1fr repeat(4,26px); gap:3px; align-items:center; padding:3px 0; border-bottom:1px dashed #eee3cf; font-size:10.5px;}
.tk-r:last-child{border-bottom:0;}
.tk-r u{text-align:center; color:#47596a;} .tk-r u.p{border-radius:4px; background:#fff0cf; color:#8a5300; font-weight:700;}
/* course: the lesson list, mid-course */
.tk-list{padding:4px 0;}
.tk-l{display:grid; grid-template-columns:18px 1fr auto; gap:8px; align-items:center; padding:6px 10px;}
.tk-l i{display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#f1edfd; color:#5a3fb5; font-size:9.5px; font-weight:700;}
.tk-l b{margin:0; font-family:inherit; font-size:11.5px; font-weight:600; text-transform:none; line-height:1.2;}
.tk-l em{font-style:normal; font-size:10.5px; color:var(--so-muted);}
.tk-l.done i{background:#5a3fb5; color:#fff;} .tk-l.done b{color:var(--so-muted);}
.tk-l.now{background:#f6f3fe;} .tk-l.now i{background:#fff; box-shadow:inset 0 0 0 1.5px #5a3fb5;}
/* the older .ct-tix-m span / em / small rules reach into the snippets; undo them there */
.ct-tix-m .tk-snip span{position:static; padding:0; color:inherit;}
.ct-tix-m .tk-snip .tk-when{padding:10px 12px;}
.ct-tix-m .tk-snip .tk-date{display:flex; color:#fff;}
.ct-tix-m .tk-snip .tk-h{padding:0 0 5px;}
.ct-tix-m .tk-snip .tk-r{padding:3px 0;}
.ct-tix-m .tk-snip .tk-l{padding:6px 10px;}
.ct-tix-m .tk-snip em{color:var(--so-muted); font-size:10.5px;}
.ct-tix-i > a{grid-template-columns:minmax(0,1fr) 128px;}
@media (max-width:960px){ .ct-tix-i > a{grid-template-columns:minmax(0,1fr) 112px;} }
.ct-tix-m{min-width:0;}
.tk-r{grid-template-columns:minmax(0,1fr) repeat(4,minmax(18px,26px));}
.tk-r > i{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tk-when i,.ct-tix-m .tk-snip .tk-when b{white-space:nowrap;}
.tk-date{width:54px;} .ct-tix-m .tk-snip .tk-when{padding:10px; gap:4px 8px; flex:1; min-width:0;}

/* one site palette (Mehul 2026-10-26: no rainbow). Every tile and ticket uses the site's own colours:
   ink #0b1a24, teal #007a76, pale #f6f9fc, tint #e3f4f2, edge #e1e7ed. No per-product hues, no gradients. */
.fx-c[class*="t-"]{--w1:#f6f9fc; --w2:#f6f9fc; --a:#007a76;}
.fx-v{background:#f6f9fc;}
.v-ok{background:#e3f4f2;}
.v-code{background:#007a76;}
.tk-camp,.tk-sched,.tk-course{background:#f6f9fc;}
.tk-camp small,.tk-sched small,.tk-course small{color:#007a76;}
.tk-snip{box-shadow:0 0 0 1px #e1e7ed;}
.tk-h{border-bottom-color:#e1e7ed;} .tk-r{border-bottom-color:#eef2f5;}
.tk-r u.p{background:#e3f4f2; color:#007a76;}
.tk-l i{background:#e3f4f2; color:#007a76;}
.tk-l.done i{background:#007a76;} .tk-l.now{background:#f1f8f7;} .tk-l.now i{box-shadow:inset 0 0 0 1.5px #007a76;}
.v-code{box-shadow:0 1px 2px rgba(13,27,42,.12); transform:none;}
.v-lu i{background:#f4f7f9; color:#47596a;} .v-lu i.p{background:#e3f4f2; color:#007a76;}
.v-course .v-play{left:auto; right:10px; top:10px; margin:0;}
/* small phones: stub drops under the face so the screen snippets keep their width */
@media (max-width:480px){
  .ct-tix-i > a{grid-template-columns:1fr;}
  .ct-tix-s{flex-direction:row; flex-wrap:wrap; align-items:center; border-left:0; border-top:2px dashed #d5dde3;}
  .ct-tix-s::before,.ct-tix-s::after{top:-9px; bottom:auto;} .ct-tix-s::before{left:-9px;} .ct-tix-s::after{left:auto; right:-9px;}
  .ct-tix-s > small{width:100%;}
  .ct-tix-s .cp{display:flex; gap:24px;}
}

/* quiet variety (Mehul 2026-10-26: "not the same for each one, subtle designs like Stripe"). Stripe's way:
   a soft single-hue wash inside the frame, placed differently per card, and on a few cards thin line arcs.
   Teal and navy tints only; no dots, stripes or glows (rejected 2026-10-23). Five treatments, cycled. */
:root{
  --arcs:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' fill='none' stroke='%23d3e2e6' stroke-width='1'%3E%3Ccircle cx='400' cy='0' r='120'/%3E%3Ccircle cx='400' cy='0' r='190'/%3E%3Ccircle cx='400' cy='0' r='260'/%3E%3C/svg%3E");
  --arcs-low:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' fill='none' stroke='%23d3e2e6' stroke-width='1'%3E%3Cpath d='M-20 230C80 170 190 250 420 150'/%3E%3Cpath d='M-20 255C90 200 200 275 420 185'/%3E%3C/svg%3E");
}
.fx-c:nth-child(5n+1) .fx-v{background:radial-gradient(90% 80% at 100% 0%,#dcefed 0%,rgba(220,239,237,0) 70%) #f6f9fc;}
.fx-c:nth-child(5n+2) .fx-v{background:var(--arcs) right top/100% 100% no-repeat,#f6f9fc;}
.fx-c:nth-child(5n+3) .fx-v{background:radial-gradient(90% 90% at 0% 100%,#e2ebf3 0%,rgba(226,235,243,0) 70%) #f6f9fc;}
.fx-c:nth-child(5n+4) .fx-v{background:var(--arcs-low) center bottom/100% 100% no-repeat,#f6f9fc;}
.fx-c:nth-child(5n+5) .fx-v{background:linear-gradient(180deg,#e9f4f3 0%,#f6f9fc 65%);}
.tk-camp{background:radial-gradient(90% 90% at 100% 0%,#dcefed 0%,rgba(220,239,237,0) 70%) #f6f9fc;}
.tk-sched{background:var(--arcs) right top/100% 100% no-repeat,#f6f9fc;}
.tk-course{background:radial-gradient(100% 90% at 0% 100%,#e2ebf3 0%,rgba(226,235,243,0) 70%) #f6f9fc;}
.fx-v::after{display:none;} /* old dot texture, dots rejected 2026-10-23 */

/* Stripe-style card art, v2 (Mehul 2026-10-26, from Stripe's "Accept payments / billing / embed" cards):
   the art lives in ONE region of the frame (a corner sweep, a field of hairlines, or a wash rising from the
   bottom) and the white UI card sits over it. One hue family only: the site teal, its tints and the deep teal-navy. */
:root{
  --sweep-tr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='.4'%3E%3Cstop offset='0' stop-color='%23e3f4f2' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%239fdcd7'/%3E%3Cstop offset='1' stop-color='%23007a76'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M110 0H400V150C320 92 220 40 110 0Z' fill='url(%23g)'/%3E%3C/svg%3E");
  --sweep-bl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23dbe9ee' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%2399c6cf'/%3E%3Cstop offset='1' stop-color='%230f5f7a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 260V120C80 180 180 228 310 260Z' fill='url(%23g)'/%3E%3C/svg%3E");
}
.fx-v > *{position:relative; z-index:1;}
.fx-v > em{z-index:2;}
.fx-v::before{content:none;}
/* 1: teal sweep into the top-right corner */
.fx-c:nth-child(5n+1) .fx-v{background:var(--sweep-tr) right top/100% 100% no-repeat,#f6f9fc;}
/* 2: hairlines fading out of the bottom-left */
.fx-c:nth-child(5n+2) .fx-v{background:#f6f9fc;}
.fx-c:nth-child(5n+2) .fx-v::before{content:""; position:absolute; inset:0; z-index:0;
  background:repeating-linear-gradient(135deg,rgba(0,122,118,.32) 0 1px,transparent 1px 7px);
  -webkit-mask-image:radial-gradient(90% 110% at 0% 100%,#000 0%,transparent 70%); mask-image:radial-gradient(90% 110% at 0% 100%,#000 0%,transparent 70%);}
/* 3: a wash rising from the bottom, white at the top */
.fx-c:nth-child(5n+3) .fx-v{background:linear-gradient(180deg,#f6f9fc 25%,#cfeae7 75%,#8fd0ca 100%);}
/* 4: deep teal-navy sweep from the bottom-left */
.fx-c:nth-child(5n+4) .fx-v{background:var(--sweep-bl) left bottom/100% 100% no-repeat,#f6f9fc;}
/* 5: hairlines in the top-right with a light wash under them */
.fx-c:nth-child(5n+5) .fx-v{background:radial-gradient(80% 90% at 100% 0%,#dcefed,rgba(220,239,237,0) 70%) #f6f9fc;}
.fx-c:nth-child(5n+5) .fx-v::before{content:""; position:absolute; inset:0; z-index:0;
  background:repeating-linear-gradient(45deg,rgba(15,95,122,.28) 0 1px,transparent 1px 7px);
  -webkit-mask-image:radial-gradient(80% 100% at 100% 0%,#000 0%,transparent 65%); mask-image:radial-gradient(80% 100% at 100% 0%,#000 0%,transparent 65%);}

/* tickets: same family, one treatment each */
.ct-tix-m > *{position:relative; z-index:1;}
.tk-camp{background:var(--sweep-tr) right top/100% 100% no-repeat,#f6f9fc;}
.tk-sched{background:#f6f9fc;}
.tk-sched::before{content:""; position:absolute; inset:0; z-index:0;
  background:repeating-linear-gradient(135deg,rgba(0,122,118,.3) 0 1px,transparent 1px 7px);
  -webkit-mask-image:radial-gradient(100% 90% at 100% 100%,#000 0%,transparent 70%); mask-image:radial-gradient(100% 90% at 100% 100%,#000 0%,transparent 70%);}
.tk-course{background:linear-gradient(180deg,#f6f9fc 30%,#cfeae7 80%,#8fd0ca 100%);}

/* art on a few cards only (Mehul 2026-10-26: "too much" on every card). Three tiles, one per row,
   spread diagonally; one ticket (the Scheduler). Everything else is the plain pale #f6f9fc. */
.fx-c:nth-child(n) .fx-v{background:#f6f9fc;}
.fx-c:nth-child(n) .fx-v::before{content:none;}
.fx-c:nth-child(1) .fx-v{background:var(--sweep-tr) right top/100% 100% no-repeat,#f6f9fc;}
.fx-c:nth-child(6) .fx-v::before{content:""; position:absolute; inset:0; z-index:0;
  background:repeating-linear-gradient(135deg,rgba(0,122,118,.32) 0 1px,transparent 1px 7px);
  -webkit-mask-image:radial-gradient(90% 110% at 0% 100%,#000 0%,transparent 70%); mask-image:radial-gradient(90% 110% at 0% 100%,#000 0%,transparent 70%);}
.fx-c:nth-child(11) .fx-v{background:linear-gradient(180deg,#f6f9fc 25%,#cfeae7 75%,#8fd0ca 100%);}
.tk-camp,.tk-course{background:#f6f9fc;}
.tk-sched::before{content:none;}
.tk-sched{background:var(--sweep-tr) right top/100% 100% no-repeat,#f6f9fc;}
/* secondary indigo on one grid tile (see page-solutions-baseball.css) */
.fx-c:nth-child(6) .fx-v{background:#f3f4fc;}
.fx-c:nth-child(6) .fx-v::before{background:repeating-linear-gradient(135deg,rgba(74,85,196,.3) 0 1px,transparent 1px 7px);}

/* readability pass (Mehul 2026-10-26): every text colour on these pages passes WCAG AA (4.5:1) on the
   surface it sits on, and no visible label is smaller than 11px. #5f6c79 is the muted grey: 4.7:1 or
   better on white, #f6f9fc, the indigo and teal tints. */
.so-page{--so-muted:#5f6c79;}
.so-crumbs3 ol{color:#5f6c79;}
.so-others span{color:#5f6c79;}
.fx-t small{color:#56677a;}
.fx-v > em{font-size:11px;}
.v-card small,.v-site small,.v-course small,.v-post small,.v-code small{font-size:11px;}
.v-card small{color:#5f6c79;}
.v-course small{color:#5f6c79;}
.v-ok{font-size:11px;}
.v-rec u{font-size:11px;}
.v-lu i{font-size:11px; color:#47596a;}
.v-code{color:#fff;} .v-code b,.v-code small{color:#fff; opacity:1;}

/* sharper corners on the solutions pages (Mehul 2026-10-27), same rule as the homepage, About and product pages:
   8px on large frames, 6px on small cards. !important because many of these were set with deeper selectors. */
main .cs-site,main .so-tile,main .fx-c a,main .bb-calc,main .bb-ui.bb-lb,main .bb-ui.bb-cmp,main .bb-fc,main .tk-t3{border-radius:8px !important;}
main .bb-cmp-f{border-radius:0 0 8px 8px !important;}
main .px-w,main .bb-ui.bb-reg,main .bb-ui.bb-chk,main .bb-ui.bb-after,main .v-site,main .v-card,main .v-course,main .v-code,main .v-post{border-radius:6px !important;}

/* ===== sports index without images (Mehul 2026-10-27): group label on the left, white cards on the right, each
   with a slim bar in that sport's placeholder tone. Hairlines, sentence case, one hover move. */
.so-ix .six-g{display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; padding:32px 0; border-top:1px solid #e3e9ed;}
.so-ix .six-g:last-child{border-bottom:1px solid #e3e9ed;}
.six-h{margin:6px 0 0; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#5f6c79;}
.six-l{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin:0; padding:0; list-style:none;}
.six-c{position:relative; display:flex; flex-direction:column; min-height:150px; height:100%; padding:22px 22px 20px; border-radius:8px; background:#fff;
  box-shadow:0 0 0 1px #e3e9ed; text-decoration:none; color:#0b1a24; transition:box-shadow .2s, transform .2s; overflow:hidden;}
.six-c::before{content:""; position:absolute; left:0; top:0; right:0; height:3px; background:var(--c); transform-origin:left; transform:scaleX(.18); transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.six-c b{font-size:21px; font-weight:600; letter-spacing:-.02em;}
.six-c small{margin-top:6px; font-size:14px; line-height:1.45; color:#5f6c79;}
.six-c em{align-self:flex-start; margin-top:12px; padding:3px 9px; border-radius:999px; background:#e3f4f2; color:#007a76; font-style:normal; font-size:12px; font-weight:600;}
.six-go{display:grid; place-items:center; margin-top:auto; padding-top:18px; align-self:flex-end; color:#62707c; transition:color .2s, transform .2s;}
.six-go .so-arr{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.six-c:hover{box-shadow:0 0 0 1px #cfdbe2, 0 20px 40px -28px rgba(13,40,60,.35); transform:translateY(-2px);}
.six-c:hover::before{transform:scaleX(1);}
.six-c:hover .six-go{color:var(--c); transform:translateX(3px);}
.six-c:focus-visible{outline:2px solid #007a76; outline-offset:2px;}
@media (max-width:900px){ .so-ix .six-g{grid-template-columns:minmax(0,1fr); gap:16px;} }
@media (max-width:520px){ .six-l{grid-template-columns:1fr 1fr;} .six-c{min-height:132px; padding:18px 16px 16px;} .six-c b{font-size:18px;} }
@media (prefers-reduced-motion:reduce){ .six-c,.six-c::before,.six-go{transition:none;} }
/* one even grid of all ten sports; the group is a small label inside each card */
.six-l.six-all{grid-template-columns:repeat(5,minmax(0,1fr));}
.six-k{margin-bottom:14px; font-style:normal; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#62707c;}
.six-all .six-c{min-height:190px;}
@media (max-width:1100px){ .six-l.six-all{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:720px){ .six-l.six-all{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* ---- every product under the hero of each sport page (2026-10-27): the Products grid, smaller cards
   with the whole drawing showing; the Marketing card carries the US map with camp emails flying out ---- */
.so-px{padding:clamp(56px,7vw,88px) 0 clamp(40px,5vw,64px);}
.so-px .px-grid{gap:14px; margin-top:32px;}
.so-px .px-card-t{padding:18px 20px 0;}
.so-px .px-card h3{font-size:16px;}
.so-px .px-card p{margin-top:6px; font-size:14px;}
.so-px .px-subs{margin-top:10px;}
.so-px .px-grid .px-card .px-art{height:232px; margin-top:14px !important;}
/* website: two camps and the toast, all inside the frame */
.so-px .px-site .px-web{top:16px;}
.so-px .px-web-top{padding:9px 16px;}
.so-px .px-cr{padding:9px 0;}
.so-px .px-toast{bottom:14px; right:24px;}
/* marketing: campaign card on top, the map under it */
.so-px .px-map{display:flex; align-items:flex-end; justify-content:center;}
.so-px .px-map .usm{position:relative; left:auto; right:auto; top:auto; width:88%; max-width:330px; height:auto; margin:0 0 6px;}
.so-px .px-mail-s{left:14px; right:auto; top:12px; width:min(250px, calc(100% - 28px)); padding:8px 12px 3px; z-index:2;}
.so-px .px-mail-s .px-mail-h{margin-bottom:2px;}
.so-px .px-mail-s .px-mail-h b{font-size:12px;}
.so-px .px-mail-s .px-mail-f{grid-template-columns:28px 1fr; padding:5px 0; font-size:11px;}
.so-px .usm-tag em{color:#b45d14;}
/* scheduler, check-in, recruiting, store, payments: tighter so nothing is cut */
.so-px .px-lu{top:14px; padding:10px 14px;}
.so-px .px-ci{top:14px;}
.so-px .px-grid .px-recruit .px-rq{top:12px; transform:scale(.86); transform-origin:50% 0;}
.so-px .px-pay{top:14px; padding:12px 16px;}
.so-px .px-pay-h b{font-size:22px;}
.so-px .px-bars{height:44px; margin:10px 0 10px;}
.so-px .px-pay-r{padding-top:9px;}
.so-px .px-pdf{top:24px;}
.so-px .px-ci-r{padding:6px 0;}
/* top row swapped (2026-10-27): the map fills the big card, the website sits in the small one */
@media (min-width:641px){
  .so-px .px-market-map.w2 .px-map{align-items:flex-start;}
  .so-px .px-grid .px-market-map.w2{justify-content:flex-start;}
  .so-px .px-grid .px-market-map.w2 .px-art{flex:1 1 auto; height:auto; min-height:340px;}
  .so-px .px-grid .px-market-map.w2 .px-art,.so-px .px-grid .px-site:not(.w2) .px-art{height:320px;}
  .so-px .px-market-map.w2 .px-map .usm{width:76%; max-width:500px; margin:0 0 0 21%;}   /* 500px+ shows the city on each tag */
  .so-px .px-site:not(.w2) .px-web{top:40px;}
  .so-px .px-market-map.w2 .px-mail-s{top:auto; bottom:18px; left:18px; width:250px;}
}
.so-px .px-site:not(.w2) .px-web{left:14px; right:14px;}
.so-px .px-site:not(.w2) .px-cr{grid-template-columns:minmax(0,1fr) 40px 64px; gap:10px;}
.so-px .px-site:not(.w2) .px-sp{display:none;}
.so-px .px-site:not(.w2) .px-web-top span{display:none;}
.so-px .px-site:not(.w2) .px-toast{right:12px; left:auto;}
/* wide screens: the map rides up beside the chips and grows into the card */
@media (min-width:1200px){
  .so-px .px-grid .px-market-map.w2 .px-art{margin-top:-6px !important;}
  .so-px .px-market-map.w2 .px-map .usm{max-width:550px; margin-left:19%;}
}
/* phones: the map runs the full width of the card */
@media (max-width:640px){
  .so-px .px-grid .px-market-map .px-art{height:300px;}
  .so-px .px-market-map .px-map .usm{width:100%; max-width:none; margin:0 0 4px;}
}
/* "Run the whole camp": the camp website + phone registration from Website & Registration, above the stages */
.bb-site{max-width:980px; margin:clamp(32px,4vw,48px) auto clamp(40px,5vw,64px); padding-right:clamp(0px,4vw,60px);}
.bb-site .pk-brand-art{padding-bottom:40px;}
/* sport video under the hero (2026-10-28) */
.so-vid{padding:clamp(48px,6vw,80px) 0 0;}
.so-vid-frame{position:relative; margin-top:clamp(24px,3vw,36px); overflow:hidden; border-radius:14px; background:#0b1a24;
  box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 40px 80px -40px rgba(13,40,60,.45);}
.so-vid-v{display:block; width:100%; height:auto; aspect-ratio:16/9; background:#0b1a24;}
.so-vid-play{position:absolute; left:50%; top:50%; display:grid; place-items:center; width:84px; height:84px; margin:-42px 0 0 -42px; padding:0;
  border:0; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:0 10px 30px rgba(0,0,0,.25); cursor:pointer; transition:transform .2s;}
.so-vid-play:hover{transform:scale(1.05);}
.so-vid-play:focus-visible{outline:3px solid #007a76; outline-offset:4px;}
.so-vid-play svg{width:34px; height:34px; margin-left:4px; fill:#0b1a24;}
.so-vid-frame.is-on .so-vid-play{display:none;}
@media (max-width:640px){ .so-vid-frame{border-radius:10px;} .so-vid-play{width:64px; height:64px; margin:-32px 0 0 -32px;} .so-vid-play svg{width:26px; height:26px;} }
/* the video sits narrower than the page on desktop, centred, so the whole frame fits on screen with its heading */
@media (min-width:900px){ .so-vid .pc-wrap{max-width:calc(940px + 2 * var(--pc-gutter, 24px));} .so-vid .pc-sh{text-align:center;} }
/* the play button sits under the poster's words, not on them */
.so-vid-play{top:83%;}
@media (max-width:640px){ .so-vid-play{top:84%; width:48px; height:48px; margin:-24px 0 0 -24px;} .so-vid-play svg{width:20px; height:20px; margin-left:3px;} }
.so-vid .pc-sh{text-wrap:balance;}
/* play button, standard player style (2026-10-28): a dark disc with a white rounded triangle, optically centred */
.so-vid-play{width:68px !important; height:68px !important; margin:-34px 0 0 -34px !important; background:rgba(11,26,36,.82) !important;
  box-shadow:0 8px 24px rgba(11,26,36,.28) !important; transition:transform .2s, background .2s;}
.so-vid-play:hover{background:#0b1a24 !important; transform:scale(1.06);}
.so-vid-play svg{width:28px !important; height:28px !important; margin:0 0 0 3px !important; fill:#fff !important;}
@media (max-width:640px){
  .so-vid-play{width:52px !important; height:52px !important; margin:-26px 0 0 -26px !important;}
  .so-vid-play svg{width:22px !important; height:22px !important; margin-left:2px !important;}
}
.so-vid-play svg{margin:0 !important;}
/* smaller play button on the poster (2026-10-28) */
.so-vid-play{width:52px !important; height:52px !important; margin:-26px 0 0 -26px !important;}
.so-vid-play svg{width:22px !important; height:22px !important;}
@media (max-width:640px){
  .so-vid-play{width:42px !important; height:42px !important; margin:-21px 0 0 -21px !important;}
  .so-vid-play svg{width:18px !important; height:18px !important;}
}