/* =====================================================================
   BASEBALL SCHEDULER (SC-534): the Lineup Builder showcase on
   /products/baseball-scheduler/, ported from Luke's vision file
   (SM_UI_Mockup marketing branch: scheduler-showcase.css) and corrected to
   what the product does. Loaded after page-category.css,
   page-website-registration.css (.rs-* sections) and page-marketing.css
   (.bi-*, .em-inc, .pr-nav, .dv-chrome). Motion: scripts/page-scheduler.js.
   ===================================================================== */
/* ---- shared mock pieces: position chips, lineup grid ---- */
  .sk-chip{display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:20px; padding:0 5px; border-radius:4px;
    font-size:9px; font-weight:800; letter-spacing:.2px; border:1px solid transparent;}
  .sk-chip.if{background:#eaf1ff; border-color:#c9daff; color:#2f5be0;}
  .sk-chip.of{background:#ecf8ec; border-color:#c8e8c6; color:#2f8a2f;}
  .sk-chip.pc{background:#fff4dc; border-color:#f5d999; color:#a86a00;}
  .sk-chip.out{color:#b6c0c8; min-width:0;}
  .sk-tr{display:grid; grid-template-columns:1.9fr repeat(var(--n),minmax(0,1fr)); align-items:center; gap:4px; padding:6px 12px; border-bottom:1px solid #f0f2f4;}
  .sk-tr > span:not(.sk-pl){text-align:center;}
  .sk-th{padding-top:7px; padding-bottom:7px; font-size:7px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#62707c; background:#fafbfc;}
  .sk-th > span:first-child{text-align:left;}
  .sk-sub{padding:5px 12px; font-size:6.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#62707c; background:#f4f6f8;}
  .sk-pl{display:flex; align-items:center; gap:7px; min-width:0;}
  .sk-pl em{font-style:normal; font-size:10px; font-weight:800; color:#0b1a24; width:8px;}
  .sk-pl > span{min-width:0;}
  .sk-pl b{display:block; font-size:10px; font-weight:800; color:#0b1a24; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .sk-pl small{display:block; font-size:7px; letter-spacing:.4px; color:#62707c;}
  .sk-bar{display:block; width:48px; height:3px; margin-top:3px; border-radius:100px; background:#e6ebef; overflow:hidden;}
  .sk-bar i{display:block; height:100%; background:#007a76;}
  .sk-team{background:#fff; border:1px solid #e6eaee; border-top:2px solid #007a76; border-radius:6px; overflow:hidden;}
  .sk-team-h{display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid #eef1f3;}
  .sk-team-h b{font-size:10.5px; font-weight:800;}
  .sk-team-h span{font-size:8px; color:#62707c; padding:2px 6px; border:1px solid #e3e8ec; border-radius:4px;}
  .sk-team-h span:first-of-type{margin-left:auto;}
  .sk-team-h em{font-style:normal; font-weight:800; color:#0b1a24;}
  .sk-pill{font-style:normal; font-size:7.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; padding:3px 7px; border-radius:4px;
    background:#e6f8f7; color:#067a76; border:1px solid #bfe9e5;}

/* ---- hero ---- */
  .pc-hero.pc-hero-scheduler{background:#f6f9fa;}
  .skh{position:relative; padding:0 70px 70px 0;}
  .sk-browser{position:relative; padding:14px 14px 0; background:#f6f7f9; border:1px solid #d3dbe1; border-radius:8px; overflow:hidden;
    box-shadow:0 30px 60px rgba(11,26,36,.16);}
  .sk-app-h{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
  .sk-app-h b{display:block; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:19px; letter-spacing:.3px; text-transform:uppercase; color:#262d36; line-height:1.05;}
  .sk-app-h small{font-size:8.5px; color:#5b6b78;}
  .sk-ok{display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:100px; background:#e7f6ee; border:1px solid #bfe6cf; color:#127c4c;
    font-style:normal; font-size:9px; font-weight:800; white-space:nowrap;}
  .sk-ok svg{width:10px; height:10px;}
  .sk-hb{display:flex; gap:6px;}
  .sk-sport{display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:100px; background:#0b1a24; color:#fff; font-style:normal; font-size:9px; font-weight:800;}
  .sk-sport svg{width:11px; height:11px; color:#5fe0da;}
  .sk-game{display:flex; align-items:center; gap:10px; margin:10px 0 8px; font-size:9px; color:#5b6b78;}
  .sk-game b{font-size:13px; font-weight:800; color:#0b1a24;}
  .sk-game span{display:inline-flex; align-items:center; gap:4px;}
  .sk-game svg{width:10px; height:10px; color:#00a9a4;}
  .skh .sk-team{border-radius:6px 6px 0 0; border-bottom:0;}
  /* Team check card, floating over the grid */
  .sk-tc{position:absolute; z-index:2; right:0; bottom:0; width:200px; padding:14px 16px 10px; background:#fff; border:1px solid #e3e8ec; border-radius:10px;
    box-shadow:0 30px 60px rgba(11,26,36,.22);}
  .sk-tc-h{padding-bottom:9px; margin-bottom:2px; border-bottom:1px solid #eef1f3; font-family:'Anton',Impact,sans-serif; font-size:15px; letter-spacing:.3px;
    text-transform:uppercase; color:#0b1a24;}
  .sk-tc-r{display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid #f3f5f7; font-size:11px; font-weight:700; color:#0b1a24;}
  .sk-tc-r small{display:block; font-size:8.5px; font-weight:500; color:#62707c;}
  .sk-tc-r b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:17px; color:#00a9a4;}
  .sk-tc-f{padding-top:7px; font-size:7.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#62707c;}
  .sk-note{position:absolute; left:0; bottom:22px; font-size:12.5px; font-weight:700; color:#3b4a57;}
  /* Fly-in, then the chips drop in one after another */
  .pp-fly.is-in .sk-browser{animation:ppRise .95s cubic-bezier(.2,.8,.2,1) .1s both;}
  .pp-fly.is-in .sk-tc{animation:ppSwoop .9s cubic-bezier(.2,.8,.2,1) .6s both;}
  .skh .sk-chip{opacity:0;}
  .pp-fly.is-in .skh .sk-chip{animation:skPop .4s cubic-bezier(.2,.9,.3,1.3) both; animation-delay:calc(1s + var(--d,0) * 1s);}
  @keyframes skPop{from{opacity:0; transform:scale(.6);} to{opacity:1; transform:none;}}
  @media (prefers-reduced-motion:reduce){
    .pp-fly.is-in .sk-browser,.pp-fly.is-in .sk-tc,.pp-fly.is-in .skh .sk-chip{animation:none;} .skh .sk-chip{opacity:1;}
  }
  @media (max-width:960px){ .skh{padding-right:50px;} }
  @media (max-width:620px){ .skh{padding:0 30px 48px 0;} .sk-tc{zoom:.75;} .sk-note{position:static; margin-top:10px;} }

/* ---- before / after photos ---- */
  .sk-ba{background:#f6f9fa;}
  .sk-ba-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px;}
  .sk-ph{margin:0;}
  .sk-ph-img{position:relative; height:420px; overflow:hidden; border-radius:10px; border:1px solid #e6ebef; background:#eef1f3;}
  .sk-ph-img img{display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.8,.2,1);}
  .sk-ph:hover .sk-ph-img img{transform:scale(1.04);}
  /* Square labels like the social graphic: gray for the old way, teal for SideCoach */
  .sk-ph-tag{position:absolute; z-index:1; left:20px; top:20px; display:inline-flex; align-items:center; padding:11px 20px; border-radius:2px;
    background:#007a76; color:#fff; font-size:12.5px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
    box-shadow:0 10px 24px rgba(11,26,36,.22);}
  .sk-ph.before .sk-ph-tag{background:rgba(110,116,122,.92);}
  /* Hand-drawn marks (red X, green check), no outline */
  .sk-mark{position:absolute; z-index:1; right:22px; top:18px; width:76px; height:76px; overflow:visible; fill:none; stroke-linecap:round; stroke-linejoin:round;}
  .sk-mark path{stroke-dasharray:1; stroke-dashoffset:1;}
  .sk-mark .u{display:none;}
  .sk-mark .c{stroke-width:7;}
  .sk-mark.x .c{stroke:#e5383b;}
  .sk-mark.ok .c{stroke:#1fbf75;}
  .sk-ba-grid.in .sk-mark path{animation:skDraw .4s cubic-bezier(.4,0,.2,1) forwards;}
  .sk-ba-grid.in .sk-mark.x .s0{animation-delay:.3s;}
  .sk-ba-grid.in .sk-mark.x .s1{animation-delay:.65s;}
  .sk-ba-grid.in .sk-mark.ok path{animation-duration:.55s; animation-delay:1.2s;}
  @keyframes skDraw{to{stroke-dashoffset:0;}}
  .sk-ph figcaption{margin-top:16px; font-size:17px; line-height:1.5; color:#7a8a97; max-width:480px;}
  .sk-ph figcaption b{font-weight:700; color:#0b1a24;}
  @media (max-width:900px){ .sk-ba-grid{grid-template-columns:1fr;} .sk-ph-img{height:320px;} }
  @media (prefers-reduced-motion:reduce){ .sk-ph-img img,.sk-photo-pan img{transition:none;} .sk-mark path{animation:none !important; stroke-dashoffset:0;} }
  @media (max-width:560px){ .sk-ph-tag{font-size:10.5px; padding:9px 14px; letter-spacing:1.4px;} .sk-mark{width:56px; height:56px;} }

/* ---- 1. steps: numbered list beside a light panel; the card flips through one step at a time ---- */
  .sk-steps{background:#fff;}
  .sk-steps-in{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(36px,6vw,80px); align-items:center; margin-top:48px;}
  .sk-list{border-top:1px solid #e6ebef;}
  .sk-item{display:flex; gap:18px; width:100%; padding:22px 0; border:0; border-bottom:1px solid #e6ebef; background:none; font:inherit; color:inherit;
    text-align:left; cursor:pointer;}
  .sk-n{flex:0 0 34px; height:34px; border-radius:50%; border:1.5px solid #dfe5ea; display:flex; align-items:center; justify-content:center;
    font-size:12.5px; font-weight:800; color:#62707c; transition:background .35s, border-color .35s, color .35s;}
  .sk-it{flex:1; min-width:0; padding-top:5px;}
  .sk-it b{display:block; font-size:19px; font-weight:700; letter-spacing:-.01em; color:#7a8a97; transition:color .3s;}
  .sk-it p{max-height:0; overflow:hidden; opacity:0; margin:0; font-size:15.5px; line-height:1.6; color:#5b6b78;
    transition:max-height .45s ease, opacity .35s ease, margin-top .35s ease;}
  .sk-prog{display:none; height:2px; margin-top:16px; background:#e6ebef; overflow:hidden;}
  .sk-prog i{display:block; height:100%; width:0; background:#007a76; animation:skFill 5s linear forwards;}
  @keyframes skFill{to{width:100%;}}
  .sk-list.paused .sk-prog i{animation-play-state:paused;}
  .sk-list.still .sk-prog i{animation:none; width:100%;}
  .sk-item:hover .sk-it b{color:#0b1a24;}
  .sk-item.on .sk-n{background:#007a76; border-color:#007a76; color:#fff;}
  .sk-item.on .sk-it b{color:#0b1a24;}
  .sk-item.on .sk-it p{max-height:120px; opacity:1; margin-top:8px;}
  .sk-item.on .sk-prog{display:block;}
  .sk-item:focus{outline:none;}
  .sk-item:focus-visible .sk-n{box-shadow:0 0 0 3px rgba(0,122,118,.3);}
  /* The card sits centred on a light panel, like the other sections */
  .sk-stage{height:570px;}
  .sk-stage::after{left:0; width:auto; background:radial-gradient(60% 55% at 85% 15%, rgba(0,122,118,.16), transparent 70%);}
  .sk-front{position:absolute; z-index:1; left:7%; right:7%; top:50%; height:478px; transform:translateY(-50%); overflow:hidden; background:#fff;
    border:1px solid #e3e8ec; border-radius:10px; box-shadow:0 1px 2px rgba(11,26,36,.05), 0 24px 50px rgba(11,26,36,.12);}
  @media (max-width:960px){ .sk-steps-in{grid-template-columns:1fr;} .sk-front{left:4%; right:4%;} }
  @media (prefers-reduced-motion:reduce){ .sk-it p{transition:none;} }
  .sk-front-h{display:flex; align-items:center; justify-content:space-between; height:52px; padding:0 20px; border-bottom:1px solid #eef1f3; background:#fbfcfd;}
  .sk-front-h b{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:800;}
  .sk-meter{display:flex; align-items:center; gap:10px; font-size:11px; color:#62707c;}
  .sk-meter > i{font-style:normal; font-weight:800; color:#0b1a24; margin:0 -6px;}
  .sk-seg4{display:flex; gap:3px;}
  .sk-seg4 i{width:18px; height:4px; border-radius:2px; background:#e3e8ec; transition:background .4s ease;}
  .sk-seg4 i.on{background:#007a76;}
  /* Step change: the old step fades up and out, then the new step's pieces glide in one after another. */
  .sk-panes{position:relative; height:calc(100% - 52px); overflow:hidden;}
  .sk-pane{position:absolute; inset:0; padding:18px 22px; opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;}
  .sk-pane > *{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);}
  .sk-pane.on{opacity:1; visibility:visible; transition:opacity .2s ease, visibility 0s;}
  .sk-pane.on > *{opacity:1; transform:none;}
  .sk-pane.on > :nth-child(1){transition-delay:.15s;} .sk-pane.on > :nth-child(2){transition-delay:.22s;}
  .sk-pane.on > :nth-child(3){transition-delay:.29s;} .sk-pane.on > :nth-child(4){transition-delay:.36s;}
  .sk-pane.on > :nth-child(5){transition-delay:.43s;} .sk-pane.on > :nth-child(6){transition-delay:.5s;}
  .sk-pane.on > :nth-child(7){transition-delay:.57s;} .sk-pane.on > :nth-child(n+8){transition-delay:.64s;}
  .sk-pane.out{opacity:0; visibility:visible; transform:translateY(-10px);}
  .sk-pane.out > *{opacity:1; transform:none; transition:none;}
  @media (prefers-reduced-motion:reduce){ .sk-pane,.sk-pane > *{transition:opacity .2s ease !important; transform:none !important;} }
  .sk-step-h small{display:block; font-size:9.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#00a9a4;}
  .sk-step-h b{display:block; margin:2px 0 12px; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:20px; letter-spacing:.3px; text-transform:uppercase; color:#262d36;}
  .sk-seg{display:grid; grid-template-columns:1fr 1fr; padding:3px; border-radius:8px; background:#f1f4f6; margin-bottom:10px;}
  .sk-seg i{font-style:normal; text-align:center; padding:7px; border-radius:6px; font-size:11.5px; font-weight:700; color:#62707c;}
  .sk-seg i.on{background:#fff; color:#067a76; box-shadow:0 1px 3px rgba(11,26,36,.1);}
  .sk-f{display:block; min-width:0; margin-bottom:8px;}
  .sk-f small{display:block; margin-bottom:4px; font-size:9.5px; font-weight:800; color:#3b4a57;}
  .sk-f i{position:relative; display:block; padding:7px 10px; border:1px solid #e3e8ec; border-radius:6px; font-style:normal; font-size:11.5px; color:#0b1a24;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .sk-f.sel i{padding-right:24px;}
  .sk-f.sel i::after{content:""; position:absolute; right:10px; top:50%; margin-top:-2px; border:4px solid transparent; border-top:5px solid #6b7782;}
  .sk-f.on i{border-color:#007a76; box-shadow:0 0 0 3px rgba(0,122,118,.14);}
  .sk-go{display:table; margin:8px 0 0 auto; padding:8px 18px; border-radius:100px; background:#1f9d57; color:#fff; font-size:11.5px; font-weight:800;}
  .sk-loaded{display:flex; align-items:center; gap:6px; margin-top:9px; font-size:10.5px; font-weight:700; color:#127c4c;}
  .sk-loaded svg{width:12px; height:12px;}
  .sk-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px;}
  .sk-stat{padding:8px 10px; border:1px solid #e3e8ec; border-left:3px solid #007a76; border-radius:5px;}
  .sk-stat b{display:block; font-size:19px; font-weight:800; color:#0b1a24;}
  .sk-stat small{font-size:8px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#62707c;}
  .sk-box{padding:11px 12px; margin-bottom:10px; border:1px solid #e3e8ec; border-radius:8px; background:#fafbfc;}
  .sk-box-h{display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#0b1a24;}
  .sk-box-h i{width:16px; height:16px; border-radius:50%; background:#007a76; color:#fff; font-style:normal; font-size:9px; display:flex; align-items:center; justify-content:center;}
  .sk-k{display:block; margin:9px 0 5px; font-size:8.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#62707c;}
  .sk-row4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px;}
  .sk-row4 .sk-f{margin-bottom:0;}
  .sk-fits{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:9px;}
  .sk-fits span{padding:8px; border:1px solid #e3e8ec; border-radius:6px; background:#fff;}
  .sk-fits small{display:block; font-size:7.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#62707c;}
  .sk-fits b{display:block; margin-top:3px; font-size:10.5px; font-weight:800; color:#0b1a24;}
  .sk-fits .best{background:#007a76; border-color:#007a76;}
  .sk-fits .best small,.sk-fits .best b{color:#fff;}
  /* ---- steps doing their work: .run is added when a step's card comes up, .done when it finishes ---- */
  .sk-pane.on > .sk-late{opacity:0; transform:translateY(6px); transition:none;}
  .sk-pane.on.run > .sk-late{opacity:1; transform:none; transition:opacity .45s ease, transform .5s ease; transition-delay:calc(var(--d) * 1s);}
  .sk-pane.run .sk-press{animation:skPress .5s ease .6s;}
  @keyframes skPress{40%{transform:scale(.92); box-shadow:0 0 0 6px rgba(31,157,87,.22);}}
  /* Step 2: the values type in one field after another */
  .sk-type .sk-f i{color:transparent; transition:none;}
  .sk-pane.run .sk-type .sk-f i{color:#0b1a24; transition:color .2s ease, border-color .3s, box-shadow .3s;}
  .sk-pane.run .sk-type .sk-f:nth-child(1) i{transition-delay:.5s;} .sk-pane.run .sk-type .sk-f:nth-child(2) i{transition-delay:.75s;}
  .sk-pane.run .sk-type .sk-f:nth-child(3) i{transition-delay:1s;} .sk-pane.run .sk-type .sk-f:nth-child(4) i{transition-delay:1.25s;}
  .sk-pane.run .sk-type.two .sk-f:nth-child(1) i{transition-delay:1.55s; border-color:#007a76; box-shadow:0 0 0 3px rgba(0,122,118,.14);}
  .sk-pane.run .sk-type.two .sk-f:nth-child(2) i{transition-delay:1.8s;}
  .sk-fits span{transition:background .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2,.9,.3,1.3);}
  .sk-fits span small,.sk-fits span b{transition:color .35s ease;}
  .sk-fits .best{transform:scale(1.04);}
  /* Step 3: each check runs in turn, then the verdict */
  .sk-pane.on > .sk-diag{opacity:.35; transform:none; transition:none;}
  .sk-diag i svg{opacity:0; transform:scale(.4);}
  .sk-diag i{background:#fff; border-color:#dfe5ea;}
  .sk-pane.on.run > .sk-diag{opacity:1; transition:opacity .3s ease; transition-delay:calc(.5s + var(--d) * .55s);}
  .sk-pane.run .sk-diag i{background:#ecfaf9; border-color:#9fe0dc; transition:background .3s, border-color .3s; transition-delay:calc(.75s + var(--d) * .55s);}
  .sk-pane.run .sk-diag i svg{opacity:1; transform:none; transition:opacity .2s, transform .35s cubic-bezier(.2,.9,.3,1.4); transition-delay:calc(.75s + var(--d) * .55s);}
  .sk-diag + .sk-ready{margin:10px 0 0;}
  .sk-pane .sk-diag{padding:5px 0;}
  /* Step 4: chips land cell by cell, playing-time bars fill, then the lineup is marked balanced */
  .sk-pane .sk-chip{opacity:0;}
  .sk-pane.run .sk-chip{animation:skPop .35s cubic-bezier(.2,.9,.3,1.3) both; animation-delay:calc(1.2s + var(--d,0) * 3.25s);}
  .sk-pane .sk-bar i{transform:scaleX(0); transform-origin:left;}
  .sk-pane.run .sk-bar i{transform:none; transition:transform 3.2s ease 1.3s;}
  .sk-pipe span{transition:background .3s, border-color .3s, color .3s;}
  .sk-built{display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-size:11.5px; color:#5b6b78;}
  .sk-built b{font-size:15px; font-weight:800; color:#0b1a24; font-variant-numeric:tabular-nums;}
  .sk-built em{display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:100px; background:#e7f6ee; border:1px solid #bfe6cf; color:#127c4c;
    font-style:normal; font-size:11px; font-weight:800; opacity:0; transform:scale(.85); transition:opacity .3s, transform .4s cubic-bezier(.2,.9,.3,1.4);}
  .sk-built em svg{width:11px; height:11px;}
  .sk-pane.done .sk-built em{opacity:1; transform:none;}
  @media (prefers-reduced-motion:reduce){
    .sk-pane.on > .sk-late,.sk-pane.on > .sk-diag,.sk-pane .sk-chip{opacity:1 !important; transform:none !important; animation:none !important;}
    .sk-type .sk-f i{color:#0b1a24;} .sk-diag i svg{opacity:1; transform:none;} .sk-pane .sk-bar i{transform:none;}
  }
  .sk-ready{padding:10px 12px; margin-bottom:6px; border:1px solid #9fe0dc; border-left:3px solid #00a9a4; border-radius:6px; background:#ecfaf9;}
  .sk-ready b{display:block; font-size:12.5px; font-weight:800; color:#067a76;}
  .sk-ready small{font-size:10.5px; color:#3b4a57;}
  .sk-diag{display:flex; align-items:flex-start; gap:9px; padding:7px 0; border-bottom:1px solid #f3f5f7;}
  .sk-diag i{flex:0 0 16px; height:16px; border-radius:4px; border:1px solid #9fe0dc; background:#ecfaf9; color:#067a76; display:flex; align-items:center; justify-content:center;}
  .sk-diag i svg{width:10px; height:10px;}
  .sk-diag b{display:block; font-size:11.5px; font-weight:800; color:#0b1a24;}
  .sk-diag small{font-size:10px; color:#6b7782;}
  .sk-pipe{display:flex; align-items:center; gap:6px; margin-bottom:10px;}
  .sk-pipe span{padding:4px 11px; border-radius:6px; border:1px solid #e3e8ec; font-size:10.5px; font-weight:700; color:#62707c;}
  .sk-pipe span.done{color:#067a76; border-color:#bfe9e5; background:#ecfaf9;}
  .sk-pipe span.on{background:#007a76; border-color:#007a76; color:#fff;}
  .sk-pipe i{font-style:normal; color:#b6c0c8;}
  .sk-team.sm{margin-bottom:10px;}

/* ---- why SideCoach: swipeable dark cards (arrow buttons reuse .pr-nav from promo-showcase.css) ---- */
  .sk-why-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;}
  .sk-why-track{display:grid; grid-auto-flow:column; grid-auto-columns:clamp(290px,31vw,410px); gap:20px; margin:44px calc(50% - 50vw) 0 0;
    padding:4px max(28px, calc(50vw - 600px)) 24px 0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;}
  .sk-why-track::-webkit-scrollbar{display:none;}
  .sk-wcard{scroll-snap-align:start;}
  /* Light card holding a white feature mock and a teal callout bubble (Stripe-style) */
  .sk-why{background:#fff;}
  .sk-wart{position:relative; height:400px; overflow:hidden; border-radius:10px; background:#f6f9fa; border:1px solid #e6ebef;}
  .sk-wcard p{margin-top:18px; font-size:17px; line-height:1.5; color:#7a8a97; max-width:380px;}
  .sk-wcard p b{font-weight:700; color:#0b1a24;}
  .wm{position:absolute; left:10%; right:-1px; top:64px; bottom:-1px; padding:18px 20px; background:#fff; border:1px solid #e3e8ec; border-right:0; border-bottom:0;
    border-radius:8px 0 0 0; box-shadow:0 1px 2px rgba(11,26,36,.04), 0 16px 34px rgba(11,26,36,.06);}
  .wm-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid #eef1f3;}
  .wm-h b{font-size:14px; font-weight:700; color:#0b1a24;}
  .wm-h small{font-size:11.5px; color:#62707c; white-space:nowrap;}
  .wb{position:absolute; z-index:2; right:18px; top:22px; max-width:72%; display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:8px;
    background:#1f9d57; color:#fff; font-size:13px; font-weight:700; line-height:1.35; box-shadow:0 12px 26px rgba(19,128,79,.28);}
  .wb svg{flex:0 0 14px; width:14px; height:14px;}
  .wb.btn{top:auto; bottom:26px; right:26px; border-radius:100px; padding:10px 18px; background:#1f9d57;}
  /* roster */
  .wr{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid #f0f2f4; font-size:12.5px;}
  .wr b{font-weight:700; color:#0b1a24;} .wr small{color:#62707c; font-size:11px;}
  .wr em{font-style:normal; font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:100px; background:#e3f7f5; color:#0a8a80;}
  /* even playing time */
  .wbars{display:flex; align-items:flex-end; gap:6px; height:170px; padding-top:18px; border-bottom:1px solid #e6ebef;
    background:repeating-linear-gradient(180deg, transparent 0 41px, #f0f2f4 41px 42px);}
  .wbars i{flex:1; border-radius:3px 3px 0 0; background:#007a76;}
  .wbars i:nth-child(3),.wbars i:nth-child(8){background:#7fd9d4;}
  .wax{display:flex; justify-content:space-between; margin-top:6px; font-size:10.5px; color:#62707c;}
  /* pitching rules */
  .wf2{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px;}
  .wf2 small{display:block; margin-bottom:4px; font-size:11px; font-weight:700; color:#3b4a57;}
  .wf2 i{display:block; padding:8px 10px; border:1px solid #e3e8ec; border-radius:6px; font-style:normal; font-size:12.5px; color:#0b1a24;}
  .wok{display:flex; align-items:center; gap:7px; margin-top:16px; padding:10px 12px; border-radius:6px; background:#f1fbfa; border:1px solid #bfe9e5;
    font-size:12.5px; font-weight:700; color:#067a76;}
  .wok svg{width:14px; height:14px;}
  /* positions diamond */
  .wdia{display:block; width:100%; max-width:300px; margin:6px auto 0; overflow:visible;}
  .wdia path{fill:#f1fbfa; stroke:#bfe9e5; stroke-width:1.5;}
  .wdia rect.if{fill:#eaf1ff; stroke:#c9daff;} .wdia rect.of{fill:#ecf8ec; stroke:#c8e8c6;} .wdia rect.pc{fill:#fff4dc; stroke:#f5d999;}
  .wdia text{font-size:9px; font-weight:800; text-anchor:middle; dominant-baseline:middle; fill:#0b1a24;}
  /* late scratch */
  .wg{display:grid; grid-template-columns:1fr repeat(3,36px); gap:6px; align-items:center; padding:9px 0; border-bottom:1px solid #f0f2f4; font-size:12.5px;}
  .wg b{font-weight:700; color:#0b1a24;}
  .wg .sk-chip{min-width:32px;}
  .wg.cut{background:#fff6f6; margin:0 -20px; padding:9px 20px;}
  .wg.cut b{color:#62707c; text-decoration:line-through;}
  .wg.cut em{grid-column:2 / -1; justify-self:end; font-style:normal; font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:100px; background:#fdeef0; color:#c0344d;}
  /* printed card */
  .wpaper{left:10%; right:10%; top:40px; border:1px solid #e3e8ec; border-bottom:0; border-radius:3px 3px 0 0;}
  .wp-h b{display:block; font-size:22px; font-weight:800; letter-spacing:-.02em; color:#0b1a24;}
  .wp-h small{display:block; margin:3px 0 12px; font-size:9px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#62707c;}
  .wp-r{display:grid; grid-template-columns:2fr repeat(4,1fr); padding:7px 8px; border-bottom:1px solid #eceff2; font-size:11.5px; font-weight:700; color:#0b1a24;}
  .wp-r span:not(:first-child){text-align:center;}
  .wp-th{background:#0b0d10; color:#fff; font-size:9.5px; letter-spacing:.8px; text-transform:uppercase; border-bottom:0;}
  .wp-r:nth-child(odd):not(.wp-th){background:#f7f8f9;}
  @media (max-width:620px){ .sk-why-head{flex-direction:column; align-items:flex-start;} .sk-why-track{grid-auto-columns:82vw; padding-right:16px;} .sk-wart{height:380px;} .wm{left:6%;} }

/* ---- 2. camp-wide check ---- */
  .sk-check{background:#f6f9fa;}
  .sk-check-in{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(36px,6vw,80px); align-items:center;}
  .sk-check .rs-checks{margin-top:26px;}
  .sk-check .rs-checks li{font-size:15.5px;}
  .sk-check-pan{height:540px;}
  .sk-camp{left:7%; right:7%; top:50%; transform:translateY(-50%); padding:22px 24px;}
  .sk-greens{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .sk-green{display:flex; align-items:flex-start; gap:8px; padding:10px; border:1px solid #bfe9e5; border-radius:6px; background:#f1fbfa;}
  .sk-green > i{flex:0 0 18px; height:18px; border-radius:50%; background:#00a9a4; color:#fff; display:flex; align-items:center; justify-content:center;}
  .sk-green > i svg{width:11px; height:11px;}
  .sk-green b{display:block; font-size:12px; font-weight:800; color:#0b1a24; line-height:1.3;}
  .sk-green small{display:block; margin-top:2px; font-size:10.5px; line-height:1.4; color:#5b6b78;}
  .sk-split{display:grid; grid-template-columns:1.25fr 1fr; gap:18px; margin-top:16px; padding-top:14px; border-top:1px solid #eef1f3;}
  .sk-k2{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px;}
  .sk-k2 span{font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#067a76;}
  .sk-k2 small{font-size:10.5px; color:#62707c;}
  .sk-k2 small b{color:#067a76;}
  .sk-hist{display:grid; grid-template-columns:34px 1fr 28px; gap:8px; align-items:center; padding:3px 0; font-size:10.5px; color:#5b6b78;}
  .sk-hist > i{height:9px; border-radius:100px; background:#eef1f3; overflow:hidden;}
  .sk-hist > i i{display:block; height:100%; border-radius:100px; background:#007a76; transform-origin:left; transform:scaleX(0); transition:transform 1s cubic-bezier(.2,.8,.2,1);}
  .sk-hist b{text-align:right; font-weight:800; color:#0b1a24;}
  .sk-check-pan.in .sk-hist > i i{transform:none;}
  .sk-big{display:block; font-size:32px; font-weight:800; letter-spacing:-.02em; color:#067a76; line-height:1;}
  .sk-big small{font-size:14px; color:#62707c;}
  .sk-full{display:block; height:9px; margin-top:10px; border-radius:100px; background:#eef1f3; overflow:hidden;}
  .sk-full i{display:block; height:100%; background:#00a9a4; transform-origin:left; transform:scaleX(0); transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .2s;}
  .sk-check-pan.in .sk-full i{transform:none;}
  .sk-cap{display:block; margin-top:7px; font-size:10.5px; color:#5b6b78;}
  @media (max-width:960px){ .sk-check-in{grid-template-columns:1fr;} }
  @media (max-width:560px){ .sk-greens,.sk-split{grid-template-columns:1fr;} .sk-check-pan{height:720px;} }
  @media (prefers-reduced-motion:reduce){ .sk-hist > i i,.sk-full i{transition:none; transform:none;} }

/* ---- 3. schedule and print ---- */
  .sk-print{background:#fff;}
  .sk-ph-badge{position:absolute; z-index:1; left:18px; bottom:18px; display:inline-flex; align-items:center; gap:8px; padding:9px 14px 9px 10px; border-radius:6px;
    background:rgba(255,255,255,.96); color:#0b1a24; font-size:13px; font-weight:700; box-shadow:0 8px 22px rgba(11,26,36,.22);}
  .sk-ph-badge i{display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:4px; background:#1f9d57; color:#fff;}
  .sk-ph-badge svg{width:12px; height:12px;}
  .sk-sched{left:8%; right:8%; top:50%; transform:translateY(-50%); padding:20px 22px 18px;}
  .sk-gr{display:grid; grid-template-columns:14px 24px minmax(0,1fr) minmax(0,1fr) 62px 66px; gap:10px; align-items:center; padding:10px 4px;
    border-bottom:1px solid #eef1f3; font-size:12px; color:#0b1a24;}
  .sk-gr > i{color:#c3ccd3; display:flex;} .sk-gr > i svg{width:13px; height:13px;}
  .sk-gr > b{font-weight:800;}
  .sk-gr > span{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .sk-gr > small{font-size:11.5px; color:#5b6b78;}
  .sk-gr > em{font-style:normal; font-weight:700; text-align:right; font-variant-numeric:tabular-nums;}
  .sk-gh{padding-top:0; font-size:9.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#62707c;}
  .sk-gh > span{font-weight:800;} .sk-gh > span:last-child{text-align:right;}
  .sk-gb{grid-template-columns:14px 1fr auto; background:repeating-linear-gradient(135deg, transparent 0 6px, #f6f8f9 6px 7px);}
  .sk-gb > span{font-weight:500; font-style:italic; color:#6b7782;}
  .sk-gb > em{font-weight:600; color:#6b7782;}
  .sk-dl{display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:16px;}
  .sk-dl span,.sk-dl em{display:inline-flex; align-items:center; gap:6px; font-style:normal; padding:8px 13px; border-radius:6px; font-size:11.5px; font-weight:700; white-space:nowrap;}
  .sk-dl svg{width:13px; height:13px;}
  .sk-dl span{background:#fff; border:1px solid #dfe5e9; color:#0b1a24;}
  .sk-dl em{background:#1f9d57; border:1px solid #1f9d57; color:#fff;}
  @media (max-width:560px){ .sk-sched{left:4%; right:4%; padding:16px 14px;} .sk-gr{grid-template-columns:12px 22px minmax(0,1fr) minmax(0,1fr) 54px; gap:7px; font-size:11px;}
    .sk-gr > small,.sk-gh > span:nth-child(5){display:none;} .sk-dl span,.sk-dl em{padding:8px 10px;} }
  /* Photo of printed cards, filling its panel */
  .sk-photo-pan img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.8,.2,1);}
  .sk-photo-pan::before,.sk-photo-pan::after{display:none;}
  .sk-photo-pan:hover img{transform:scale(1.04);}

  /* Excel download: a workbook window that flips between its three sheets */
  .sk-xl-pan{height:540px;}
  .sk-xl{left:6%; right:6%; top:50%; transform:translateY(-50%); height:440px; display:flex; flex-direction:column; overflow:hidden; border-radius:8px;}
  .xl-bar{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid #e3e8ec; background:#f7f9fa;}
  .xl-bar i{width:14px; height:16px; border-radius:2px; background:#1f9d57; box-shadow:inset 0 -5px 0 rgba(255,255,255,.25);}
  .xl-bar b{font-size:12px; font-weight:700; color:#0b1a24;}
  .xl-cols{display:grid; grid-template-columns:repeat(9,1fr); border-bottom:1px solid #e3e8ec; background:#f3f5f7;}
  .xl-cols span{padding:3px 0; text-align:center; font-size:9px; color:#62707c; border-right:1px solid #e8ecef;}
  .xl-sheets{position:relative; flex:1; overflow:hidden;}
  .xl-sheet{position:absolute; inset:0; padding:12px 14px; opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); pointer-events:none;}
  .xl-sheet.on{opacity:1; transform:none;}
  .xl-tabs{display:flex; gap:2px; padding:0 10px; border-top:1px solid #e3e8ec; background:#f7f9fa;}
  .xl-tabs span{padding:7px 12px; white-space:nowrap; font-size:10.5px; font-weight:600; color:#5b6b78; border-bottom:2px solid transparent; transition:color .3s, border-color .3s, background .3s;}
  .xl-tabs span.on{color:#127c4c; font-weight:800; border-bottom-color:#1f9d57; background:#fff;}
  .xl-ttl{padding:5px 8px; border:1px solid #0b1a24; border-bottom:0; font-size:12px; font-weight:800; text-transform:uppercase; color:#0b1a24;}
  .xl-ttl.xl-gap{margin-top:12px;}
  .xl-r{display:grid; align-items:center; border-left:1px solid #0b1a24; border-right:1px solid #0b1a24; font-size:10px; color:#0b1a24;}
  .xl-r span{padding:3.5px 4px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .xl-r span.l{text-align:left;} .xl-r span i{font-style:normal;} .xl-r span.b{font-weight:700;}
  .xl-hd{background:#007a76; border-top:1px solid #0b1a24; border-bottom:1px solid #0b1a24; font-weight:800;}
  .xl-end{border-bottom:1px solid #0b1a24;}
  .xl-cards{grid-template-columns:22px minmax(0,2.4fr) repeat(6,minmax(0,1fr));}
  .xl-sub{padding:3px 6px; border:1px solid #0b1a24; background:#dcdfe2; font-size:10px; font-weight:800; text-transform:uppercase;}
  .xl-reg{grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(0,.8fr)) repeat(2,minmax(0,1fr)) minmax(0,1.3fr) minmax(0,1fr); border:0; border-bottom:1px solid #eef1f3;}
  .xl-reg.xl-hd{border:0; color:#fff;}
  .xl-reg span.l{padding-left:8px;}
  .xl-game + .xl-game{margin-top:14px;}
  .xl-pair{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .xl-box{border:1px solid #0b1a24;}
  .xl-game .xl-ttl{border:0; padding:0 0 5px;}
  .xl-side{padding:4px 7px; background:#007a76; border-bottom:1px solid #0b1a24; font-size:10.5px; font-weight:800; text-transform:uppercase; color:#0b1a24;}
  .xl-pc{display:grid; grid-template-columns:minmax(0,1.6fr) 30px minmax(0,1.6fr) 30px; font-size:9.5px; color:#0b1a24;}
  .xl-pc span{padding:3px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .xl-pch{background:#f0f2f4; border-bottom:1px solid #0b1a24; font-weight:800; text-transform:uppercase; font-size:9px;}
  @media (max-width:560px){
    .sk-xl-pan{height:520px;} .sk-xl{left:3%; right:3%; height:460px;} .xl-sheet{padding:10px;}
    .xl-tabs{padding:0 4px;} .xl-tabs span{padding:7px 7px; font-size:9.5px;}
    .xl-r span i{display:none;} .xl-cards{grid-template-columns:16px minmax(0,3.2fr) repeat(6,minmax(0,1fr));} .xl-cards span{padding:3.5px 2px;} .xl-pair{grid-template-columns:1fr;} .xl-game + .xl-game{display:none;}
    .xl-reg{grid-template-columns:minmax(0,2.2fr) repeat(2,minmax(0,.8fr)) minmax(0,1.1fr) minmax(0,1fr);} .xl-reg span:nth-child(4),.xl-reg span:nth-child(6),.xl-reg span:nth-child(7){display:none;}
  }
  @media (prefers-reduced-motion:reduce){ .xl-sheet{transition:none;} }

/* ---- FAQ: heading on the left, accordion on the right ---- */
  .sk-faq{background:#fff;}
  .sk-faq-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.9fr); gap:clamp(32px,5vw,64px); align-items:start;}
  .sk-faq-h{margin:0; font-size:clamp(24px,2.3vw,30px); font-weight:500; line-height:1.25; letter-spacing:-.02em; color:#7a8a97;}
  .sk-faq-h b{display:block; font-weight:700; color:#0b1a24;}
  .sk-faq-list{border-top:1px solid #e6ebef;}
  .sk-qa{border-bottom:1px solid #e6ebef;}
  .sk-qa button{display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:22px 0; border:0; background:none;
    font:inherit; font-size:clamp(16.5px,1.4vw,18.5px); font-weight:600; color:#0b1a24; text-align:left; cursor:pointer;}
  .sk-qa button:hover span{color:#067a76;}
  .sk-qa button:focus-visible{outline:2px solid #007a76; outline-offset:4px; border-radius:6px;}
  .sk-qa button span{transition:color .2s;}
  .sk-qa button i{flex:0 0 30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:6px; background:#e9f8f6; color:#067a76;
    transition:background .2s, color .2s;}
  .sk-qa button i svg{width:14px; height:14px;}
  .sk-qa button i .v{transform-origin:center; transition:transform .3s cubic-bezier(.2,.8,.2,1);}
  .sk-qa.open button i{background:#007a76; color:#fff;}
  .sk-qa.open button i .v{transform:scaleY(0);}
  .sk-qa-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1);}
  .sk-qa-a > div{overflow:hidden;}
  .sk-qa-a p{margin:0; padding:0 56px 24px 0; font-size:16px; line-height:1.65; color:#5b6b78;}
  .sk-qa.open .sk-qa-a{grid-template-rows:1fr;}
  @media (max-width:860px){ .sk-faq-in{grid-template-columns:1fr; gap:28px;} .sk-qa-a p{padding-right:0;} }
  @media (prefers-reduced-motion:reduce){ .sk-qa-a,.sk-qa button i .v{transition:none;} }

/* ---- 4. built for college programs: three numbered columns ---- */
  .sk-college{background:#f6f9fa;}
  .em-inc-grid.sk-three{grid-template-columns:repeat(3,minmax(0,1fr));}
  .sk-num{display:block; margin-bottom:18px; font-family:'Anton',Impact,sans-serif; font-size:40px; line-height:1; color:#007a76;}
  @media (max-width:960px){ .em-inc-grid.sk-three{grid-template-columns:1fr;} .sk-three .em-inc-col{padding-left:0;} .sk-three .em-inc-col::before{display:none;} }


/* the Marketing page's phone layout for .em-inc-col (icon beside text) is not this section's: number above, text below */
.sk-three .em-inc-col, .sk-three .em-inc-col + .em-inc-col{display:block;}

/* ---- built for prospect camps: a dark navy band with a faint diamond, numbers in light teal ---- */
.rs.sk-college{position:relative; overflow:hidden; isolation:isolate; background:#0d1b2a; color:#c9d4dc;}
.rs.sk-college::before{content:""; position:absolute; z-index:-1; inset:0;
  background:radial-gradient(60% 90% at 85% 0%, rgba(0,122,118,.45), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(40,90,180,.25), transparent 70%);}
.rs.sk-college::after{content:""; position:absolute; z-index:-1; right:-120px; top:50%; width:520px; height:520px; transform:translateY(-50%) rotate(45deg);
  border:1px solid rgba(159,227,223,.16); box-shadow:inset 0 0 0 110px transparent, 0 0 0 1px rgba(159,227,223,.06);}
.rs.sk-college .pc-sh{color:#8fa3b2;}
.rs.sk-college .pc-sh b{color:#fff;}
.sk-college .em-inc-col{padding-top:22px; border-top:1px solid rgba(255,255,255,.12);}
.sk-college .em-inc-col + .em-inc-col::before{display:none;}
.sk-college .em-inc-col b{color:#fff; font-size:17px;}
.sk-college .em-inc-col b::before{display:none;}
.sk-college .em-inc-col p{color:#a9b8c4;}
.sk-college .sk-num{color:#5fd4cf; font-size:46px;}
.em-inc-grid.sk-three{gap:32px;}
@media (max-width:960px){ .em-inc-grid.sk-three{gap:8px;} .rs.sk-college::after{width:320px; height:320px; right:-160px;} }

/* ---- hero buttons, after Stripe: a pill whose chevron grows a stem on hover, and a plain text link ---- */
.pp-hero-scheduler .pc-ctas{align-items:center; gap:28px; margin-top:34px;}
.pp-hero-scheduler .skx-go{height:46px; padding:0 20px 0 24px; gap:9px; font-size:16px; box-shadow:0 1px 1px rgba(0,60,58,.12), 0 6px 16px -6px rgba(0,128,124,.55);}
.pp-hero-scheduler .skx-go:hover{transform:none; background:#00605d;}
.sk-link{display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:#00726f; text-decoration:none;}
.sk-link:hover{color:#00605d;}
.pc-arr{width:10px; height:10px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.pc-arr-l{opacity:0; transition:opacity .15s;}
.pc-arr-h{transition:transform .15s cubic-bezier(.2,.8,.2,1);}
:is(.skx-go,.sk-link):hover .pc-arr-l{opacity:1;}
:is(.skx-go,.sk-link):hover .pc-arr-h{transform:translateX(3px);}
.sk-link:focus-visible{outline:2px solid #00726f; outline-offset:4px; border-radius:4px;}
@media (prefers-reduced-motion:reduce){ .pc-arr-l,.pc-arr-h{transition:none;} }

/* ---- hero: the field, drawn in hairlines behind the devices (2026-10-19, second pass) ----
   The lines draw themselves on, the nine positions light up one by one in their lineup colors,
   a ball is hit to right and a runner circles the bases with a short fading trail. */
.pc-hero.pp-hero-scheduler{background:linear-gradient(180deg,#f3f9f8,#f9fbfb 70%);}
.pc-hero.pp-hero-scheduler::before, .pc-hero.pp-hero-scheduler::after{display:none;}
.skd{position:absolute; z-index:-1; right:-5%; bottom:-6px; width:min(1200px,80%); pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%), linear-gradient(0deg,#000 80%,transparent);
  mask-image:linear-gradient(90deg,transparent 0%,#000 32%); transform:translate3d(var(--px,0),var(--py,0),0); transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.skd svg{display:block; width:100%; height:auto; overflow:visible;}
.skd-wash{fill:url(#skd-g);}
.skd-mow{fill:url(#skd-mow);}
.skd-skin{fill:#007a76; fill-opacity:.05;}
.skd-grass{fill:#fff; fill-opacity:.55;}
.skd-lines *{fill:none; stroke:#007a76; stroke-opacity:.24; stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-dasharray:1 1; stroke-dashoffset:0;}
.skd-lines .skd-f{stroke-opacity:.16;}
.skd-b rect, .skd-b path{fill:#fff; stroke:#007a76; stroke-opacity:.5; stroke-width:1.2; vector-effect:non-scaling-stroke;}
.skd-trail{fill:none; stroke:url(#skd-tail); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:0 100; vector-effect:non-scaling-stroke;}
.skd-dot{fill:#007a76; offset-path:path('M500 720 L650 570 L500 420 L350 570 Z'); offset-distance:0%; opacity:0;}
.skd-hit{fill:none; stroke:#a86a00; stroke-opacity:.6; stroke-width:1.4; stroke-dasharray:.012 .02; vector-effect:non-scaling-stroke; opacity:0;}
.skd-pos circle{stroke:#fff; stroke-width:2; vector-effect:non-scaling-stroke; transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.skd-pos text{font:800 13px/1 Archivo, sans-serif; letter-spacing:.06em; text-anchor:middle; paint-order:stroke; stroke:#f3f9f8; stroke-width:4px; stroke-linejoin:round;}
.skd-pos .if circle{fill:#2f5be0;} .skd-pos .if text{fill:#2f5be0;}
.skd-pos .of circle{fill:#2f8a2f;} .skd-pos .of text{fill:#2f8a2f;}
.skd-pos .pc circle{fill:#a86a00;} .skd-pos .pc text{fill:#a86a00;}
.skd-pos g{opacity:.38;}
.skd-pos text{opacity:0;}
@media (prefers-reduced-motion:no-preference){
  .skd-lines *{stroke-dasharray:1 1; stroke-dashoffset:1; animation:skd-draw 1.8s cubic-bezier(.4,.1,.2,1) .2s forwards;}
  .skd-lines path:nth-child(2){animation-delay:.3s;} .skd-lines path:nth-child(3){animation-delay:.55s; animation-duration:2.2s;}
  .skd-lines path:nth-child(4){animation-delay:.8s;} .skd-lines path:nth-child(5){animation-delay:.9s;}
  .skd-lines circle{animation-delay:1.1s;}
  .skd-pos g{animation:skd-pos 13.5s ease-in-out calc(2s + var(--k) * 1.5s) infinite;}
  .skd-pos g text{animation:skd-lbl 13.5s ease-in-out calc(2s + var(--k) * 1.5s) infinite;}
  .skd-hit{animation:skd-hit 9s ease-out 3s infinite;}
  .skd-dot{animation:skd-run 9s cubic-bezier(.45,0,.55,1) 3s infinite;}
  .skd-trail{animation:skd-trail 9s cubic-bezier(.45,0,.55,1) 3s infinite;}
}
@media (prefers-reduced-motion:reduce){ .skd-pos g{opacity:.85;} .skd-pos text{opacity:1;} }
@keyframes skd-draw{to{stroke-dashoffset:0;}}
@keyframes skd-pos{0%,100%{opacity:.38;} 4%,11%{opacity:1;} 16%{opacity:.38;}}
@keyframes skd-lbl{0%,100%{opacity:0;} 4%,11%{opacity:1;} 16%{opacity:0;}}
@keyframes skd-hit{0%{opacity:0; stroke-dashoffset:1;} 3%{opacity:1;} 14%{stroke-dashoffset:0; opacity:1;} 26%,100%{opacity:0; stroke-dashoffset:0;}}
/* the hit, then the runner: home to first, second, third and back, one base at a time */
@keyframes skd-run{0%,8%{opacity:0; offset-distance:0%;} 10%{opacity:1; offset-distance:0%;} 24%{offset-distance:25%;} 28%{offset-distance:25%;} 42%{offset-distance:50%;} 46%{offset-distance:50%;} 60%{offset-distance:75%;} 64%{offset-distance:75%;} 78%{offset-distance:100%; opacity:1;} 84%,100%{offset-distance:100%; opacity:0;}}
@keyframes skd-trail{0%,10%{stroke-dasharray:0 100; stroke-dashoffset:0; opacity:0;} 11%{opacity:.8;}
  24%{stroke-dasharray:14 100; stroke-dashoffset:-11;} 28%{stroke-dasharray:4 100; stroke-dashoffset:-21;}
  42%{stroke-dasharray:14 100; stroke-dashoffset:-36;} 46%{stroke-dasharray:4 100; stroke-dashoffset:-46;}
  60%{stroke-dasharray:14 100; stroke-dashoffset:-61;} 64%{stroke-dasharray:4 100; stroke-dashoffset:-71;}
  78%{stroke-dasharray:14 100; stroke-dashoffset:-86; opacity:.8;} 84%,100%{stroke-dasharray:0 100; stroke-dashoffset:-100; opacity:0;}}
@media (max-width:640px){ .skd{width:160%; right:-30%; -webkit-mask-image:none; mask-image:none; opacity:.75;} .skd-pos text{display:none;} }

/* field placement: bigger and further left, so the infield, the mound and short sit in the open gap below and beside the screens */
.skd{right:2%; width:min(1320px,92%); -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 26%,#000 44%); mask-image:linear-gradient(90deg,transparent 0%,transparent 26%,#000 44%);}
@media (max-width:1100px){ .skd{right:-8%; width:110%;} }
/* keep the copy clean: the field is gone by the end of the intro text */
@media (min-width:1101px){ .skd{right:-2%; -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 37%,#000 47%); mask-image:linear-gradient(90deg,transparent 0%,transparent 37%,#000 47%);} }

/* field, third pass (Mehul 2026-10-19): no stripes; a clearer field with real colour, crisper chalk and a soft glow */
.skd-wash{fill:url(#skd-g);}
.skd-skin{fill:url(#skd-s); fill-opacity:.85;}
.skd-grass{fill:#cfeae6; fill-opacity:1;}
.skd-glow path{fill:none; stroke:#5fd4cf; stroke-width:10; stroke-opacity:.35; filter:url(#skd-blur);}
.skd-lines *{stroke:#fff; stroke-opacity:.95; stroke-width:2.4;}
.skd-lines .skd-f{stroke:#007a76; stroke-opacity:.25; stroke-width:1.2;}
.skd-b rect, .skd-b path{fill:#fff; stroke:#9fd1ce; stroke-opacity:1; filter:drop-shadow(0 2px 3px rgba(0,80,76,.25));}
.skd-pos g{opacity:.55;}
.skd-pos text{stroke:#e2f2f0;}

/* field, fourth pass: the fair territory is a brand-teal field (deep at the plate, fading out by the fence) with white chalk */
.skd-skin{fill:url(#skd-s); fill-opacity:.9;}
.skd-grass{fill:#0b8a85; fill-opacity:1;}
.skd-glow path{stroke:#ffffff; stroke-width:6; stroke-opacity:.25;}
.skd-lines *{stroke:#fff; stroke-opacity:.9; stroke-width:2;}
.skd-lines .skd-f{stroke:#fff; stroke-opacity:.35; stroke-width:1.2;}
.skd-b rect, .skd-b path{fill:#fff; stroke:none; filter:drop-shadow(0 2px 2px rgba(0,40,38,.35));}
.skd-trail{stroke:url(#skd-tail-w);}
.skd-dot{fill:#fff; filter:drop-shadow(0 0 6px rgba(255,255,255,.9));}
.skd-hit{stroke:#fff; stroke-opacity:.9;}
.skd-pos circle{stroke:#fff; stroke-width:2;}
.skd-pos g{opacity:.85;}
.skd-pos text{fill:#fff !important; stroke:none; font-size:14px;}
.skd-pos .if circle{fill:#6f92ff;} .skd-pos .of circle{fill:#5ccf6a;} .skd-pos .pc circle{fill:#ffc44d;}
@keyframes skd-pos{0%,100%{opacity:.6;} 4%,11%{opacity:1;} 16%{opacity:.6;}}
.pc-hero.pp-hero-scheduler{background:linear-gradient(180deg,#f3f9f8,#f7fbfb 70%);}
/* tablets: the field stays on the screens' side, clear of the copy */
@media (min-width:641px) and (max-width:1100px){
  .skd{right:-22%; width:105%; -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 40%,#000 52%); mask-image:linear-gradient(90deg,transparent 0%,transparent 40%,#000 52%);}
}

/* field colours, fifth pass (Mehul 2026-10-19: more contrast): a deep night-teal field so the white screens and chalk pop,
   a true clay infield, a brighter grass square, chalk at full white */
.skd-skin{fill-opacity:1;}
.skd-grass{fill:#0f7d78;}
.skd-lines *{stroke:#fff; stroke-opacity:1; stroke-width:2.2;}
.skd-lines .skd-f{stroke-opacity:.4;}
.skd-glow path{stroke:#5fd4cf; stroke-width:8; stroke-opacity:.35;}
.skd-b rect, .skd-b path{filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
.skd-pos text{font-size:15px;}
.skd-pos .if circle{fill:#7ea0ff;} .skd-pos .of circle{fill:#6fdc7c;} .skd-pos .pc circle{fill:#ffcb5c;}
.sk-steps{scroll-margin-top:72px;}

/* field, tilted (Mehul 2026-10-19): laid flat like the real field seen from behind the plate, so the whole infield shows
   in the open space under the copy and the outfield runs back behind the screens. It pivots on home plate. */
@media (min-width:1101px){
  .skd{left:calc(50% - 700px); right:auto; width:1300px; bottom:-34px; -webkit-mask-image:none; mask-image:none;
    transform-origin:50% 92%; transform:translate3d(var(--px,0),var(--py,0),0) perspective(1500px) rotateX(56deg) rotateZ(30deg);}
}
@media (min-width:641px) and (max-width:1100px){
  .skd{left:calc(50% - 520px); right:auto; width:1000px; bottom:-26px; -webkit-mask-image:none; mask-image:none;
    transform-origin:50% 92%; transform:perspective(1200px) rotateX(56deg) rotateZ(30deg);}
}
@media (min-width:1101px){ .skd{left:calc(50% - 640px); bottom:-58px;} }
@media (min-width:641px) and (max-width:1100px){ .skd{left:calc(50% - 450px); bottom:-44px;} }
/* still field (Mehul 2026-10-19: the pointer drift made it shake), a little further right */
.skd{transition:none;}
@media (min-width:1101px){ .skd{left:calc(50% - 570px); transform:perspective(1500px) rotateX(56deg) rotateZ(30deg);} }
@media (min-width:641px) and (max-width:1100px){ .skd{left:calc(50% - 410px);} }

/* ---- before/after (2026-10-19): one late scratch, twice. The timeline is three classes on .skb-grid:
   .p1 the camper is scratched, .p2 the fixes go in, .p3 the card is done. Without motion it rests on .p3. ---- */
.skb{background:#fff;}
.skb-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:44px;}
.skb-card{margin:0;}
.skb-card figcaption{margin-top:16px; font-size:15.5px; line-height:1.6; color:var(--pc-text);}
.skb-card figcaption b{color:var(--pc-ink);}
/* the paper card */
.skb-paper{position:relative; height:100%; min-height:380px; padding:26px 26px 30px; border-radius:14px; overflow:hidden;
  background:#fbf8f0 linear-gradient(#e9e3d3 1px, transparent 1px) 0 64px/100% 44px; box-shadow:0 1px 0 #e7e0cd, 0 22px 44px -26px rgba(60,44,10,.35);
  font-family:Caveat, 'Bradley Hand', cursive; color:#1d3d8f; transform:rotate(-.6deg);}
.skb-paper::before{content:""; position:absolute; left:162px; top:0; bottom:0; border-left:1.5px solid rgba(214,74,74,.35);}
.hh{display:flex; align-items:baseline; gap:12px; margin-bottom:10px; font-size:30px;}
.hh b{font-weight:700;} .hh span{font-size:21px; color:#5a6b9a;}
.hr{position:relative; display:grid; grid-template-columns:136px repeat(5,1fr); align-items:center; height:44px; font-size:25px; font-weight:500;}
.hth{height:30px; font-size:18px; color:#7a87ad;}
.hn{white-space:nowrap; overflow:hidden; text-overflow:clip; padding-right:6px;}
.hc{position:relative; display:grid; place-items:center;}
.hc .n{position:absolute; left:52%; top:-14px; color:#c62828; font-weight:700; font-size:24px; transform:rotate(-6deg); clip-path:inset(0 100% 0 0);}
.hx{position:absolute; left:50%; top:50%; width:44px; height:22px; transform:translate(-50%,-50%); overflow:visible;}
.hx path{fill:none; stroke:#c62828; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; vector-effect:non-scaling-stroke;}
.hs{position:absolute; left:-6px; right:-4px; top:52%; height:4px; border-radius:3px; background:#c62828; opacity:.85; transform:scaleX(0) rotate(-1.5deg); transform-origin:0 50%;}
.hnote{position:absolute; right:22px; bottom:14px; font-size:24px; font-weight:700; color:#c62828; transform:rotate(-4deg); opacity:0;}
/* the SideCoach card */
.skb-app{height:100%; min-height:380px; padding:20px 22px 18px; border:1px solid #e3eaee; border-radius:14px; background:#fff; box-shadow:0 22px 44px -26px rgba(6,40,60,.3); display:flex; flex-direction:column;}
.chh{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px;}
.chh > span{display:flex; align-items:center; gap:10px;} .chh b{font-size:15px; color:var(--pc-ink);}
.cbal{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:99px; background:#e8f6ee; color:#1f7a45; font-style:normal; font-size:12px; font-weight:800; opacity:.35; transition:opacity .4s, transform .4s;}
.cbal svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.cr{display:grid; grid-template-columns:150px repeat(5,1fr); align-items:center; height:44px; border-top:1px solid #eef2f4; overflow:hidden;
  transition:height .5s cubic-bezier(.2,.8,.2,1), opacity .4s, background .3s;}
.cth{height:30px; border-top:0; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#62707c;}
.cn{display:flex; align-items:center; gap:8px; min-width:0;} .cn b{font-size:13.5px; color:var(--pc-ink); white-space:nowrap;}
.cc{position:relative; display:grid; place-items:center; height:28px;}
.cc .sk-chip{transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s;}
.cc .n{position:absolute; opacity:0; transform:translateY(10px) scale(.9); box-shadow:0 0 0 2px #ffcb5c;}
.ctag{padding:2px 7px; border-radius:99px; background:#fdecec; color:#b42318; font-style:normal; font-size:10.5px; font-weight:800; opacity:0; transition:opacity .3s;}
.cft{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:14px;}
.cbtn{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:8px; background:#0d1b2a; color:#fff; font-size:13px; font-weight:700; transition:transform .15s, background .3s;}
.cbtn svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.cft small{font-size:12.5px; color:#62707c; opacity:0; transition:opacity .4s;}
/* p1: the scratch */
.p1 .hr.cut .hs{transform:scaleX(1) rotate(-1.5deg); transition:transform .5s cubic-bezier(.6,0,.2,1);}
.p1 .hr.cut{color:rgba(29,61,143,.55);}
.p1 .hnote{opacity:1; transition:opacity .4s .4s;}
.p1 .cr.cut{background:#fff7f7;} .p1 .cr.cut .ctag{opacity:1;} .p1 .cr.cut .sk-chip{opacity:.35;}
/* p2: the fixes, one after another on paper; one click in SideCoach */
.p2 .hc.ch .hx path{stroke-dashoffset:0; transition:stroke-dashoffset .35s ease calc(var(--o) * .55s);}
.p2 .hc.ch .n{clip-path:inset(0 0 0 0); transition:clip-path .45s steps(6) calc(var(--o) * .55s + .3s);}
.p2 .cbtn{transform:scale(.96); background:#00726f;}
.p2 .cr.cut{height:0; opacity:0; border-top-color:transparent;}
.p2 .cc.ch .v{opacity:0; transform:translateY(-10px) scale(.9);}
.p2 .cc.ch .n{opacity:1; transform:none; transition:opacity .3s calc(.25s + var(--o) * .08s), transform .45s cubic-bezier(.2,1.4,.4,1) calc(.25s + var(--o) * .08s);}
/* p3: done */
.p3 .cbal{opacity:1; transform:scale(1.05);}
.p3 .cft small{opacity:1;}
.p3 .cbtn{transform:none; background:#0d1b2a;}
/* the loop fades both cards out before it starts again */
.skb-grid.reset .skb-paper > *, .skb-grid.reset .skb-app > *{opacity:0; transition:opacity .4s;}
@media (prefers-reduced-motion:reduce){ .skb-grid *{transition:none !important;} }
@media (max-width:960px){ .skb-grid{grid-template-columns:1fr; gap:36px;} }
@media (max-width:560px){
  .skb-paper{padding:20px 14px 26px; min-height:0; transform:none;} .skb-paper::before{left:112px;}
  .hr{grid-template-columns:96px repeat(5,1fr); font-size:21px; height:40px;} .hh{font-size:25px;} .hh span{font-size:18px;}
  .hc .n{font-size:20px;} .hx{width:34px;} .hnote{font-size:20px; right:12px;}
  .skb-app{padding:16px 12px 14px; min-height:0;} .cr{grid-template-columns:96px repeat(5,1fr);} .cn b{font-size:12px; overflow:hidden; text-overflow:ellipsis;}
  .ctag{display:none;} .cft small{display:none;} .cc .sk-chip{min-width:30px; padding:3px 4px; font-size:10.5px;}
}
/* paper: rules under each row, rewrites written up and to the right of the scribble, steady card heights */
.skb-paper{background:#fbf8f0; min-height:440px;}
.hr{border-bottom:1px solid #e9e1cc;} .hth{border-bottom-color:#d9cfb6;}
.hc .n{left:auto; right:-4px; top:-16px; font-size:27px; padding:0 3px; background:#fbf8f0; border-radius:4px; transform:rotate(-8deg); clip-path:inset(0 100% 0 0);}
.p2 .hc.ch .n{clip-path:inset(-4px -4px -4px -4px);}
.hc.ch .v{opacity:1; transition:opacity .3s;}
.p2 .hc.ch .v{opacity:.55;}
.skb-app{min-height:440px;}
.skb-grid{align-items:start;}
@media (max-width:560px){ .skb-paper,.skb-app{min-height:0;} .hc .n{font-size:22px; top:-12px;} }
@media (max-width:560px){ .skb-paper{padding-bottom:52px;} .hnote{bottom:12px;} }

/* ---- the scratch, as one stage (Mehul 2026-10-19: more designed): a warm desk on the left with the card on a clipboard,
   the night-teal of the hero field on the right with the app card floating, and a camp-day timeline down the middle
   that lights up with the story ---- */
.skb{background:#f6f8f9;}
.skb .pc-sh{max-width:22em;}
.skb-grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr); gap:0; align-items:stretch; margin-top:48px;
  border-radius:22px; overflow:hidden; box-shadow:0 1px 0 rgba(13,27,42,.04), 0 40px 80px -40px rgba(13,27,42,.35);
  background:linear-gradient(90deg,#efe5d2 0%,#efe5d2 50%,#0a3d3b 50%,#06302f 100%);}
.skb-grid::before{content:""; position:absolute; inset:0 0 0 50%; pointer-events:none;
  background:radial-gradient(70% 60% at 70% 30%, rgba(95,212,207,.28), transparent 70%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/28px 28px;}
.skb-grid::after{content:""; position:absolute; inset:0 50% 0 0; pointer-events:none; opacity:.5;
  background:radial-gradient(60% 50% at 30% 20%, rgba(255,255,255,.7), transparent 70%), repeating-linear-gradient(100deg, rgba(120,90,40,.05) 0 2px, transparent 2px 9px);}
.skb-card{position:relative; z-index:1; padding:30px 34px 32px; display:flex; flex-direction:column;}
.skb-lab{display:inline-flex; align-self:flex-start; align-items:center; gap:7px; margin-bottom:18px; padding:6px 12px; border-radius:99px;
  font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;}
.skb-lab svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.skb-hand .skb-lab{background:rgba(120,82,30,.1); color:#7a5420;}
.skb-clean .skb-lab{background:rgba(95,212,207,.14); color:#9fe3df;}
.skb-hand .skb-paper{border-radius:6px 6px 10px 10px; padding-top:40px; box-shadow:0 2px 0 #d8cdb4, 0 30px 50px -24px rgba(70,45,10,.45); transform:rotate(-1.2deg);}
.skb-clip{position:absolute; z-index:3; left:50%; top:82px; width:110px; height:30px; margin-left:-55px; border-radius:8px 8px 12px 12px;
  background:linear-gradient(180deg,#c9ced4,#8e979f); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 4px 8px rgba(0,0,0,.25); transform:rotate(-1.2deg);}
.skb-clip::after{content:""; position:absolute; left:34px; right:34px; top:-9px; height:14px; border-radius:7px 7px 0 0; border:4px solid #9aa3ab; border-bottom:0;}
.skb-clean .skb-app{border:0; box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 30px 60px -20px rgba(0,0,0,.55), 0 0 80px -20px rgba(95,212,207,.35);}
.skb-card figcaption{margin-top:20px; font-size:15px;}
.skb-hand figcaption{color:#6d5a3c;} .skb-hand figcaption b{color:#3d2c12;}
.skb-clean figcaption{color:#a9c5c6;} .skb-clean figcaption b{color:#fff;}
/* the middle: the camp-day clock and three beats, lit in step with the cards */
.skb-mid{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; padding:30px 0;
  background:linear-gradient(90deg,#efe5d2,#efe5d2 49.9%,#0a3d3b 50.1%);}
.skb-mid::before{content:""; position:absolute; left:50%; top:96px; bottom:60px; width:2px; margin-left:-1px; background:linear-gradient(#c9b48c,#2b6e6a);}
.skb-time{position:relative; padding:8px 14px; border-radius:99px; background:#0d1b2a; color:#fff; font-family:var(--pc-display,Anton),sans-serif; font-size:20px; letter-spacing:.04em;
  box-shadow:0 0 0 6px rgba(13,27,42,.08); transition:background .4s;}
.skb-mid ol{position:relative; flex:1; display:flex; flex-direction:column; justify-content:space-around; margin:24px 0 0; padding:0; list-style:none; width:100%;}
.skb-mid li{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:10px 8px; opacity:.45; transition:opacity .4s;}
.skb-mid li i{width:14px; height:14px; margin-bottom:8px; border-radius:50%; background:#fff; border:3px solid #a9b4bd; transition:border-color .4s, background .4s, transform .4s;}
.skb-mid li b{font-size:13px; font-weight:800; color:#0d1b2a; padding:2px 8px; border-radius:6px; background:rgba(255,255,255,.85);}
.skb-mid li small{font-size:11.5px; line-height:1.35; color:#33505a; padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.7);}
.p1 .skb-mid .m1, .p2 .skb-mid .m2, .p3 .skb-mid .m3{opacity:1;}
.p1 .skb-mid .m1 i{border-color:#c62828; transform:scale(1.15);}
.p2 .skb-mid .m2 i{border-color:#ffb020; transform:scale(1.15);}
.p3 .skb-mid .m3 i{border-color:#1f9d55; background:#1f9d55; transform:scale(1.15);}
.p3 .skb-time{background:#00726f;}

@media (max-width:1100px){
  .skb-grid{grid-template-columns:1fr; background:none; border-radius:18px;}
  .skb-grid::before,.skb-grid::after{display:none;}
  .skb-hand{background:#efe5d2;} .skb-clean{background:linear-gradient(160deg,#0a3d3b,#06302f);}
  .skb-mid{order:-1; flex-direction:row; justify-content:center; gap:14px; padding:16px 14px; background:#0d1b2a;}
  .skb-mid::before{display:none;} .skb-mid ol{flex-direction:row; margin:0; width:auto; gap:4px;}
  .skb-mid li{padding:0 4px;} .skb-mid li small{display:none;} .skb-mid li b{background:none; color:#fff; font-size:12px;}
  .skb-mid li i{margin-bottom:4px; width:12px; height:12px;} .skb-time{font-size:16px; padding:6px 10px; box-shadow:none; background:#1b2b3c;}
  .skb-clip{top:74px;}
}
@media (max-width:560px){ .skb-mid .skb-time{display:none;} .skb-card{padding:20px 14px 22px;} .skb-clip{top:70px; width:90px; margin-left:-45px;} }
@media (max-width:1100px) and (min-width:561px){ .skb-card{align-items:center;} .skb-card > :is(.skb-paper,.skb-app,figcaption){width:100%; max-width:640px;} .skb-lab{align-self:center;} .skb-card figcaption{text-align:center;} }

/* ---- the whole camp, start to finish (Mehul 2026-10-19: less text, more picture): three stops, each a small drawing
   on its own tinted tile, joined by a base-path line a runner travels along. Four words a stop. ---- */
.sk-life{background:#fff;}
.skj{position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:48px;}
.skj-stop{position:relative; display:flex; flex-direction:column;}
.skj-art{position:relative; height:280px; border-radius:18px; overflow:hidden; display:grid; place-items:center; isolation:isolate;}
.j1 .skj-art{background:linear-gradient(160deg,#e6f6f4,#cdebe7);}
.j2 .skj-art{background:linear-gradient(160deg,#0d1b2a,#12384a);}
.j3 .skj-art{background:linear-gradient(160deg,#eef4ec,#d7e9d2);}
.skj-art::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.6;
  background:radial-gradient(rgba(13,27,42,.12) 1px, transparent 1.3px) 0 0/14px 14px; -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent); mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);}
.j2 .skj-art::before{background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.3px);}
.skj-n{position:relative; display:inline-flex; align-items:center; gap:10px; margin-top:34px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#00726f;}
.skj-n::before{content:""; width:12px; height:12px; border-radius:3px; background:#fff; border:2px solid #007a76; transform:rotate(45deg);}
.skj-stop h3{margin-top:8px; font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--pc-ink);}
.skj-line{position:absolute; left:6px; right:0; top:321px; height:2px; background:repeating-linear-gradient(90deg,#b9d9d6 0 8px,transparent 8px 14px); pointer-events:none;}
.skj-run{position:absolute; top:-4px; left:0; width:10px; height:10px; border-radius:50%; background:#007a76; box-shadow:0 0 0 4px rgba(0,122,118,.15); opacity:0;}
/* 1: the roster loads in */
.j-roster{width:78%; max-width:290px; padding:14px; border-radius:14px; background:#fff; box-shadow:0 20px 40px -20px rgba(0,80,76,.4);}
.j-r{display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid #eef2f4; opacity:0; transform:translateX(-14px); transition:opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1);}
.j-r b{font-size:13.5px; color:var(--pc-ink);} .j-r .sk-chip{font-style:normal; min-width:32px;}
.j-r:nth-child(2){transition-delay:.12s;} .j-r:nth-child(3){transition-delay:.24s;} .j-r:nth-child(4){transition-delay:.36s;}
.j-ok{display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:5px 10px; border-radius:99px; background:#e8f6ee; color:#1f7a45; font-size:12px; font-weight:800; opacity:0; transition:opacity .4s .7s;}
.j-ok svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
/* 2: a card prints out of the slot */
.j-print{position:relative; width:72%; max-width:260px; height:200px;}
.j-slot{position:absolute; left:-6%; right:-6%; top:0; height:16px; border-radius:8px; background:#253546; box-shadow:inset 0 2px 4px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.08);}
.j-paper{position:absolute; left:4%; right:4%; top:8px; height:180px; padding:22px 16px 14px; border-radius:0 0 6px 6px; background:#fff; clip-path:inset(0 0 100% 0);
  box-shadow:0 18px 30px -14px rgba(0,0,0,.6); transition:clip-path 1.6s cubic-bezier(.4,.1,.3,1) .2s;}
.j-paper b{display:block; font-family:var(--pc-display,Anton),sans-serif; font-weight:400; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--pc-ink);}
.j-lines{display:grid; gap:9px; margin-top:14px;}
.j-lines i{display:block; height:9px; border-radius:3px; background:linear-gradient(90deg,#d8e0e5 0 34%,transparent 34% 40%,#cfe0ff 40% 52%,transparent 52% 56%,#d9f0d7 56% 68%,transparent 68% 72%,#ffe7b3 72% 84%,transparent 84%);}
/* 3: one workbook, its three sheets */
.j-xl{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px;}
.j-file{display:grid; place-items:center; width:84px; height:96px; margin-bottom:8px; border-radius:12px; background:#1f7a45; color:#fff; box-shadow:0 18px 30px -14px rgba(20,90,40,.6);}
.j-file svg{width:42px; height:42px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.j-tab{padding:6px 12px; border-radius:8px; background:#fff; font-size:12.5px; font-weight:700; color:#1d4d2c; box-shadow:0 6px 14px -8px rgba(20,90,40,.4); opacity:0; transform:translateY(8px) scale(.96); transition:opacity .4s, transform .45s cubic-bezier(.2,1.4,.4,1);}
.j-tab.t2{transition-delay:.15s;} .j-tab.t3{transition-delay:.3s;}
/* seen: everything plays once, the runner goes base to base */
.skj.in .j-r{opacity:1; transform:none;} .skj.in .j-ok{opacity:1;}
.skj.in .j-paper{clip-path:inset(0 0 0 0);}
.skj.in .j-tab{opacity:1; transform:none;}
@media (prefers-reduced-motion:no-preference){ .skj.in .skj-run{animation:skj-run 3.2s cubic-bezier(.45,0,.55,1) .3s both;} }
@keyframes skj-run{0%{left:0; opacity:1;} 30%{left:calc(33.33% + 10px);} 40%{left:calc(33.33% + 10px);} 70%{left:calc(66.66% + 19px);} 80%{left:calc(66.66% + 19px);} 100%{left:calc(100% - 10px); opacity:1;}}
@media (prefers-reduced-motion:reduce){ .skj *{transition:none !important;} }
@media (max-width:900px){
  .skj{grid-template-columns:1fr; gap:36px;} .skj-line{display:none;} .skj-art{height:240px;} .skj-n{margin-top:18px;}
}
.skj-stop{z-index:1;} .skj-line{z-index:0;}
.skj-n{padding-right:12px; background:#fff;}
.skj-n{align-self:flex-start;}

/* whole camp, second pass (Mehul 2026-10-19: vague): each tile is a readable product moment, with one plain line under it */
.skj-art{height:320px;}
.skj-line{top:361px;}
.skj-stop p{margin-top:6px; font-size:15px; line-height:1.5; color:var(--pc-text);}
/* 1: registrations become a roster */
.jr{display:flex; flex-direction:column; align-items:center; width:84%; max-width:320px;}
.jr-src{display:flex; align-items:center; gap:10px; align-self:flex-start; padding:8px 12px; border-radius:10px; background:#0d1b2a; color:#fff; box-shadow:0 10px 20px -12px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-6px); transition:opacity .4s, transform .4s;}
.jr-src b{display:block; font-size:12.5px;} .jr-src small{font-size:11px; color:#9fe3df;}
.jr-ico{display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:#007a76;}
.jr-ico svg{width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.jr-arrow{align-self:flex-start; width:2px; height:18px; margin-left:24px; background:repeating-linear-gradient(#007a76 0 4px,transparent 4px 7px);}
.jr-card{width:100%; padding:12px 14px 12px; border-radius:14px; background:#fff; box-shadow:0 20px 40px -20px rgba(0,80,76,.45);}
.jr-h{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:6px; border-bottom:1px solid #eef2f4;}
.jr-h b{font-size:13px; color:var(--pc-ink);} .jr-h em{font-style:normal; font-size:11px; font-weight:700; color:#00726f;}
.j-r{padding:7px 2px;} .j-r small{margin-left:auto; font-size:11px; color:#62707c;}
.jr-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px; opacity:0; transition:opacity .4s .6s;}
.jr-stats span{padding:6px 8px; border-radius:8px; background:#f2f8f7; font-size:10.5px; color:#5b6b78; border-left:2px solid #007a76;}
.jr-stats b{display:block; font-family:var(--pc-display,Anton),sans-serif; font-weight:400; font-size:19px; line-height:1.1; color:var(--pc-ink);}
.skj.in .jr-src{opacity:1; transform:none;} .skj.in .jr-stats{opacity:1;}
.j-ok{display:none;}
/* 2: a readable lineup card prints, a second team's card behind it */
.j-print{width:86%; max-width:330px; height:270px;}
.j-paper{height:250px; padding:16px 14px 12px;}
.j-paper.back{left:9%; right:-1%; top:14px; background:#e9eef2; transform:rotate(3deg); clip-path:none; opacity:0; transition:opacity .4s 1.6s;}
.skj.in .j-paper.back{opacity:1;}
.jp-h{display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding-bottom:8px; border-bottom:2px solid #0d1b2a;}
.jp-h b{font-family:var(--pc-display,Anton),sans-serif; font-weight:400; font-size:17px; letter-spacing:.03em; text-transform:uppercase; color:var(--pc-ink);}
.jp-h span{font-size:10.5px; color:#5b6b78; white-space:nowrap;}
.jp-r{display:grid; grid-template-columns:14px minmax(0,1fr) repeat(4,30px); align-items:center; gap:4px; height:32px; border-bottom:1px solid #eef2f4;}
.jp-r > span{font-size:10.5px; color:#62707c;} .jp-r > b{font-size:12px; color:var(--pc-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.jp-r .sk-chip{font-style:normal; min-width:0; width:30px; padding:3px 0; font-size:10px; text-align:center;}
.jp-th{height:24px; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#62707c;}
.jp-th > b{font-size:9.5px; color:#62707c;} .jp-th i{font-style:normal; text-align:center;}
.j-lines{display:none;}
/* 3: the workbook, open on Registration Data */
.jx{width:88%; max-width:340px; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 20px 40px -18px rgba(20,90,40,.45); font-size:11px;}
.jx-bar{display:flex; align-items:center; gap:8px; padding:8px 10px; background:#1f7a45; color:#fff;}
.jx-bar i{width:14px; height:14px; border-radius:3px; background:#fff; opacity:.9;} .jx-bar b{font-size:11.5px;}
.jx-r{display:grid; grid-template-columns:18px minmax(0,1.6fr) .7fr .7fr 1fr 1fr; align-items:center; height:27px; border-bottom:1px solid #e7ede5;
  opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s;}
.jx-r > *{padding:0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-right:1px solid #eef3ec; height:100%; display:flex; align-items:center;}
.jx-r > span:first-child{justify-content:center; background:#f3f6f2; color:#8a9a88; font-size:10px;}
.jx-r b{font-weight:600; color:var(--pc-ink);}
.jx-th{background:#eaf3e7; font-weight:800; color:#1d4d2c; opacity:1; transform:none;}
.jx-th > *{font-weight:800;}
.jx-r:nth-child(3){transition-delay:.08s;} .jx-r:nth-child(4){transition-delay:.16s;} .jx-r:nth-child(5){transition-delay:.24s;} .jx-r:nth-child(6){transition-delay:.32s;} .jx-r:nth-child(7){transition-delay:.4s;}
.jx-tabs{display:flex; gap:2px; padding:6px 6px 7px; background:#f3f6f2; border-top:1px solid #dfe8dc;}
.jx-tabs span{padding:4px 8px; border-radius:4px; font-size:10px; font-weight:700; color:#6b7c69; white-space:nowrap;}
.jx-tabs .on{background:#fff; color:#1f7a45; box-shadow:0 1px 2px rgba(0,0,0,.12);}
.skj.in .jx-r{opacity:1; transform:none;}
.j-xl{display:none;}
@media (max-width:1100px) and (min-width:901px){ .jp-r{grid-template-columns:12px minmax(0,1fr) repeat(4,24px);} .jp-r .sk-chip{width:24px;} .jx-r{grid-template-columns:16px 1.5fr .7fr .7fr 1fr; } .jx-r > *:last-child{display:none;} }
@media (max-width:900px){ .skj-art{height:300px;} }
@media (max-width:1100px) and (min-width:901px){ .jx-tabs span{padding:3px 5px; font-size:9px;} .jx-tabs{gap:0;} }
/* the text under each tile, after Stripe (Tax, Connect): a hairline down the left with a short teal mark beside the title;
   no dashed line, no diamonds, no runner */
.skj-t{position:relative; margin-top:28px; padding-left:18px; border-left:1px solid #e3e9ec;}
.skj-t::before{content:""; position:absolute; left:-1px; top:26px; width:2px; height:22px; background:#007a76;}
.skj-t .skj-n{display:block; margin:0; padding:0; background:none; font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; color:#7a8a96;}
.skj-t .skj-n::before{display:none;}
.skj-t h3{margin-top:6px; font-size:18px; line-height:1.35;}
.skj-t p{margin-top:4px; font-size:15px; color:#5b6b78;}
@media (max-width:900px){ .skj-t{margin-top:20px;} }

/* ---- four steps as a ballpark scoreboard (2026-10-19): the steps are innings, the live one lit like a scoreboard bulb;
   the active step's one line reads under the board; the Lineup Builder card sits on a stadium-at-night backdrop ---- */
.sk-steps-in{grid-template-columns:1fr; gap:0; margin-top:40px;}
.sk-list{display:grid; grid-template-columns:150px repeat(4,minmax(0,1fr)); border:0; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#0f3a37,#0a2c2a); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 24px 48px -28px rgba(6,40,38,.7);}
.skc-head{display:flex; flex-direction:column; justify-content:center; gap:4px; padding:0 22px; border-right:1px solid rgba(255,255,255,.08);}
.skc-head b{font-family:var(--pc-display,Anton),sans-serif; font-weight:400; font-size:22px; letter-spacing:.06em; text-transform:uppercase; color:#fff;}
.skc-head small{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#6fb5b0;}
.sk-item{position:relative; flex-direction:column; align-items:flex-start; gap:10px; padding:20px 22px 22px; border:0; border-right:1px solid rgba(255,255,255,.08); text-align:left; cursor:pointer; transition:background .3s;}
.sk-item:last-child{border-right:0;}
.sk-item:hover{background:rgba(255,255,255,.04);}
.sk-n{flex:none; width:auto; height:auto; border:0; border-radius:0; background:none !important; font-family:var(--pc-display,Anton),sans-serif; font-size:44px; line-height:1; letter-spacing:.02em;
  color:rgba(255,255,255,.18); transition:color .3s, text-shadow .3s;}
.sk-item.on .sk-n{color:#ffcb5c; text-shadow:0 0 18px rgba(255,190,70,.55);}
.sk-it{padding:0; width:100%;}
.sk-it b{font-size:15px; font-weight:700; color:rgba(255,255,255,.55);}
.sk-item:hover .sk-it b, .sk-item.on .sk-it b{color:#fff;}
.sk-it p{display:none;}
.sk-prog{display:block; position:absolute; left:0; right:0; bottom:0; height:3px; margin:0; background:transparent;}
.sk-item:not(.on) .sk-prog i{animation:none; width:0;}
.sk-prog i{background:#ffcb5c;}
.sk-item:focus-visible{outline:2px solid #ffcb5c; outline-offset:-4px;}
.sk-item:focus-visible .sk-n{box-shadow:none;}
.skc-cap{min-height:1.6em; margin:22px auto 26px; max-width:46em; text-align:center; font-size:17px; line-height:1.6; color:var(--pc-text); transition:opacity .3s;}
.skc-cap.swap{opacity:0;}
/* the stage: a ballpark at night, two banks of lights, the grass at the bottom */
.sk-stage{position:relative; height:600px; border-radius:20px; overflow:hidden; border:0;
  background:radial-gradient(120% 60% at 50% 115%, #0f6b5a 0%, #0b4d44 30%, transparent 62%), linear-gradient(180deg,#081521 0%,#0d2233 55%,#0b2f33 100%);}
.sk-stage::before{content:""; position:absolute; left:0; right:0; bottom:0; height:30%; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 60px, transparent 60px 120px); -webkit-mask-image:linear-gradient(transparent,#000); mask-image:linear-gradient(transparent,#000);}
.sk-stage::after{display:none;}
.skc-light{position:absolute; top:-120px; width:520px; height:520px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,244,214,.55), rgba(255,236,190,.16) 45%, transparent 72%);}
.skc-light.l{left:-140px;} .skc-light.r{right:-140px;}
.skc-light::after{content:""; position:absolute; left:50%; top:50%; width:120px; height:26px; margin:-13px 0 0 -60px; border-radius:6px;
  background:repeating-linear-gradient(90deg,#fff8e6 0 14px,#d9cfb5 14px 18px); box-shadow:0 0 30px 10px rgba(255,240,200,.6); opacity:.9;}
.sk-front{left:50%; right:auto; width:min(860px,88%); transform:translate(-50%,-50%); height:500px; box-shadow:0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);}
@media (max-width:960px){
  .sk-list{grid-template-columns:repeat(4,minmax(0,1fr));} .skc-head{display:none;}
  .sk-item{padding:16px 12px 18px; gap:6px;} .sk-n{font-size:34px;} .sk-it b{font-size:13px;}
  .sk-stage{height:560px;} .sk-front{width:92%;} .skc-light{width:360px; height:360px; top:-110px;}
}
@media (max-width:560px){
  .sk-item{padding:12px 8px 14px;} .sk-n{font-size:28px;} .sk-it b{font-size:11.5px; line-height:1.3;}
  .skc-cap{font-size:15px; margin:16px auto 18px;} .sk-stage{border-radius:16px;} .skc-light::after{width:80px; height:18px; margin:-9px 0 0 -40px;}
}

/* ---- the stadium, drawn (Mehul 2026-10-19: sharper lights, a real ballpark): light towers behind the outfield wall
   (a smaller pair further back), lamp banks with a wide bloom, lit stands full of people, the wall and its yellow cap,
   mowing bands receding to the wall, a pool of light on the grass, the foul line and the edge of the infield,
   a vignette and fine grain ---- */
.sk-stage{background:#03070d;}
.sk-stage::before{display:none;}
.st-scene{position:absolute; inset:0; width:100%; height:100%;}
.st-scene *{stroke:none !important;}
.st-stand{fill:url(#st-st);}
.st-row{fill:none; stroke:rgba(255,255,255,.035) !important; stroke-width:1;}
.st-wall{fill:#0b3527;} .st-cap{fill:#e2bd47;}
.st-band{fill:#ffffff; fill-opacity:.05;}
.st-foul{fill:none; stroke:rgba(255,255,255,.75) !important; stroke-width:3;}
.st-dirt{fill:#a85d33;} .st-lip{fill:none; stroke:rgba(0,0,0,.25) !important; stroke-width:4;}
.st-beam{fill:url(#st-b);}
.st-pole{fill:#0a131d;} .st-bank{fill:#0b141e;}
.st-lamp{fill:#fffef6; filter:drop-shadow(0 0 3px #fff6da) drop-shadow(0 0 9px rgba(255,228,160,.85));}
.st-far .st-lamp{filter:drop-shadow(0 0 2px #fff6da) drop-shadow(0 0 6px rgba(255,228,160,.7));}
@media (prefers-reduced-motion:no-preference){
  .st-crowd circle:nth-child(9n){animation:st-flash 3.6s steps(1) infinite;}
  .st-crowd circle:nth-child(13n){animation:st-flash 5.2s steps(1) 1.7s infinite;}
}
@keyframes st-flash{0%,93%{opacity:inherit;} 95%{opacity:1; fill:#fff;} 97%,100%{opacity:inherit;}}
.skc-light{display:none;}
.sk-front{top:56%;}

/* ---- the scoreboard, second pass (Mehul 2026-10-19: classier): a hand-turned ballpark board. Painted green, a cream frame,
   one slot per step; the live step's number plate is hung in cream, finished steps keep theirs, the rest are empty slots ---- */
.sk-list{grid-template-columns:190px repeat(4,minmax(0,1fr)); padding:10px; border-radius:12px; gap:0;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.08)), repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 7px), #1d4434;
  box-shadow:inset 0 0 0 1px rgba(240,229,200,.28), inset 0 0 0 6px #1d4434, inset 0 0 0 7px rgba(240,229,200,.14), 0 26px 50px -28px rgba(10,40,30,.75);}
.skc-head{align-items:flex-start; padding:0 22px; border-right:1px solid rgba(240,229,200,.16);}
.skc-head b{font-size:20px; letter-spacing:.12em; color:#efe7d2;}
.skc-head small{color:rgba(240,229,200,.55); letter-spacing:.24em;}
.sk-item{align-items:center; text-align:center; gap:12px; padding:18px 12px 20px; border-right:1px solid rgba(240,229,200,.12);}
.sk-item:hover{background:rgba(240,229,200,.04);}
.sk-n{display:grid; place-items:center; width:56px; height:64px; border-radius:3px; font-size:36px; color:rgba(240,229,200,.16); text-shadow:none !important;
  background:#143326 !important; box-shadow:inset 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.25); transition:background .35s, color .35s, transform .35s;}
.sk-item.on .sk-n, .sk-item:has(~ .sk-item.on) .sk-n{background:#efe7d2 !important; color:#173a2c; box-shadow:0 2px 0 #c9bfa6, 0 6px 12px -4px rgba(0,0,0,.5);}
.sk-item.on .sk-n{transform:translateY(-1px);}
.sk-it b{font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(240,229,200,.5);}
.sk-item.on .sk-it b{color:#efe7d2;} .sk-item:hover .sk-it b{color:#efe7d2;}
.sk-prog{left:22%; right:22%; bottom:8px; height:2px; border-radius:2px; background:rgba(240,229,200,.12);}
.sk-prog i{background:#efe7d2;}
.sk-item:focus-visible{outline:2px solid #efe7d2; outline-offset:-6px;}
@media (max-width:960px){ .sk-list{grid-template-columns:repeat(4,minmax(0,1fr)); padding:8px;} .sk-n{width:46px; height:54px; font-size:30px;} .sk-it b{font-size:11px; letter-spacing:.06em;} }
@media (max-width:560px){ .sk-item{padding:12px 4px 16px; gap:8px;} .sk-n{width:38px; height:46px; font-size:24px;} .sk-it b{font-size:9.5px; letter-spacing:.04em; line-height:1.35;} .sk-prog{bottom:5px;} }
/* cheap to draw: no filter on each lamp, no grain; only the crowd twinkles */
.st-lamp, .st-far .st-lamp{filter:none;}
.st-scene{contain:paint;}
.st-halos{mix-blend-mode:screen; opacity:.85;}

/* ---- the four Lineup Builder panes, sharpened to the site (Mehul 2026-10-19): readable type, brand teal, one radius,
   one border colour, real buttons and stat tiles ---- */
.sk-front{border-radius:16px;}
.sk-front-h{height:56px; padding:0 24px; background:#fff; border-bottom:1px solid #e9eef1;}
.sk-front-h b{font-size:14.5px; color:var(--pc-ink);}
.sk-front-h b::before{content:""; width:22px; height:22px; border-radius:6px; background:#0d1b2a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M4 10h16M10 10v10'/%3E%3C/svg%3E") center/13px no-repeat;}
.sk-meter{font-size:12px; color:#7a8a96;}
.sk-seg4 i{width:22px; height:4px;}
.sk-panes{padding:0 6px;}
.sk-step-h small{font-size:11px; letter-spacing:.14em; color:#00726f;}
.sk-step-h b{margin:4px 0 16px; font-size:24px; color:var(--pc-ink);}
/* step 1 */
.sk-seg{padding:4px; border-radius:10px; background:#f0f4f6; margin-bottom:14px;}
.sk-seg i{padding:9px; border-radius:7px; font-size:13px; color:#7a8a96;}
.sk-seg i.on{color:#00726f; box-shadow:0 1px 2px rgba(13,27,42,.08), 0 0 0 1px rgba(13,27,42,.04);}
.sk-f small{margin-bottom:6px; font-size:11.5px; font-weight:700; color:#41505d;}
.sk-f i{display:block; position:relative; min-height:40px; padding:10px 12px; border:1px solid #dfe6ea; border-radius:9px; background:#fff; font-style:normal; font-size:13.5px; color:var(--pc-ink);}
.sk-f{margin-bottom:12px;}
.sk-go{margin-top:4px; padding:10px 20px; border-radius:9px; background:#007a76; font-size:13px; box-shadow:0 1px 0 rgba(0,0,0,.08), 0 6px 14px -6px rgba(0,122,118,.6);}
.sk-loaded{margin-top:14px; font-size:12.5px; color:#1f7a45;}
.sk-stats{gap:10px; margin-top:14px;}
.sk-stat{padding:12px 14px; border:1px solid #e3eaee; border-left:0; border-radius:10px; background:linear-gradient(180deg,#fff,#f8fbfb); box-shadow:inset 3px 0 0 #007a76;}
.sk-stat b{font-family:var(--pc-display,Anton),sans-serif; font-weight:400; font-size:28px; line-height:1.1; color:var(--pc-ink);}
.sk-stat small{display:block; margin-top:2px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7a8a96;}
/* step 2 */
.sk-box{padding:16px 16px 14px; margin-bottom:12px; border:1px solid #e3eaee; border-radius:12px; background:#fff;}
.sk-box-h{gap:9px; margin-bottom:12px; font-size:12px; letter-spacing:.1em;}
.sk-box-h i{width:20px; height:20px; font-size:11px;}
.sk-row4{gap:10px;}
.sk-box .sk-f i{font-weight:700; font-variant-numeric:tabular-nums;}
.sk-fits{gap:10px; margin-top:4px;}
.sk-fits span{padding:12px 14px; border-radius:10px; border-color:#e3eaee;}
.sk-fits small{font-size:10px; letter-spacing:.1em;}
.sk-fits b{margin-top:4px; font-size:14px;}
.sk-fits .best{box-shadow:0 10px 20px -10px rgba(0,122,118,.7);}
/* step 3 */
.sk-diag{gap:12px; padding:11px 2px; border-bottom:1px solid #eef2f4;}
.sk-diag i{flex:0 0 22px; height:22px; border-radius:50%;}
.sk-diag b{font-size:14px; color:var(--pc-ink);}
.sk-diag small{font-size:12.5px; color:#62707c;}
.sk-ready{display:flex; flex-direction:column; gap:2px; padding:14px 16px; border:0; border-radius:12px; background:#0d1b2a; box-shadow:0 12px 24px -14px rgba(13,27,42,.7);}
.sk-ready b{font-size:14px; color:#fff;} .sk-ready small{font-size:12.5px; color:#a9b8c4;}
/* step 4 */
.sk-pipe{gap:8px; margin-bottom:14px;}
.sk-pipe span{padding:6px 14px; border-radius:99px; font-size:12px;}
.sk-pipe span.on{background:#007a76; border-color:#007a76; color:#fff;}
.sk-built{margin-top:14px; font-size:13px;}
.sk-built b{font-family:var(--pc-display,Anton),sans-serif; font-weight:400; font-size:24px;}
.sk-stage{height:700px;}
.sk-front{height:590px; top:54%;}
@media (max-width:960px){ .sk-stage{height:680px;} .sk-front{height:600px;} }
@media (max-width:560px){ .sk-stage{height:700px;} .sk-front{height:640px; top:52%;} .sk-row4{grid-template-columns:repeat(2,minmax(0,1fr));} .sk-stat b{font-size:22px;} .sk-stat{padding:10px;} .sk-fits b{font-size:12px;} .sk-fits span{padding:10px;} }
/* step 4's lineup grid at a readable size */
.sk-pane .sk-team-h b{font-size:14px;}
.sk-pane .sk-tr .sk-pl b{font-size:13.5px;} .sk-pane .sk-tr .sk-pl small{font-size:11px;}
.sk-pane .sk-th{font-size:10.5px;}
.sk-pane .sk-chip{font-size:11px; min-width:34px; padding:4px 6px;}

/* ---- the stadium is a real photo now (Mehul 2026-10-19): a night ballfield, coloured navy-teal while the lights stay white ---- */
.st-scene{display:none;}
.st-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 28%; filter:contrast(1.12) brightness(.92);}
.st-tint{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,#0b2236 0%,#0d3a44 55%,#0b4a3f 100%); mix-blend-mode:color;}
.st-tint::after{content:""; position:absolute; inset:0; background:radial-gradient(90% 75% at 50% 45%, transparent 45%, rgba(3,8,14,.6) 100%), linear-gradient(180deg, rgba(3,8,14,.15), rgba(3,8,14,0) 40%, rgba(3,8,14,.35));}
.st-photo{object-position:50% 0%; filter:contrast(1.08) brightness(1.08);}
.st-tint::after{background:radial-gradient(95% 80% at 50% 40%, transparent 50%, rgba(3,8,14,.5) 100%), linear-gradient(180deg, rgba(3,8,14,0) 55%, rgba(3,8,14,.3));}
@media (max-width:560px){ .sk-front-h{padding:0 14px;} .sk-front-h b{font-size:13px; white-space:nowrap;} .sk-meter{gap:6px; font-size:11px; white-space:nowrap;} .sk-seg4 i{width:12px;} .sk-stage{height:660px;} .sk-front{height:600px;} }

/* ---- four rules, every lineup: a bento of four tiles, each its own surface and a live picture of one rule ---- */
.skw{background:#fff;}
.skw-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; margin-top:44px;}
.skw-t{position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:20px; isolation:isolate;}
.t1{grid-column:span 7; background:#0d1b2a; color:#fff;} .t2{grid-column:span 5; background:#eaf5f3;}
.t3{grid-column:span 5; background:#f6efe2;} .t4{grid-column:span 7; background:#0d3b30; color:#fff;}
.t1::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 70% at 85% 0%, rgba(0,122,118,.45), transparent 70%);}
.t4::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(70% 80% at 50% 110%, rgba(60,170,120,.4), transparent 70%);}
.skw-art{position:relative; height:300px; display:grid; place-items:center; padding:28px 28px 0;}
.skw-c{padding:22px 28px 26px;}
.skw-c h3{font-size:20px; font-weight:800; letter-spacing:-.01em; color:inherit;}
.t2 .skw-c h3, .t3 .skw-c h3{color:var(--pc-ink);}
.skw-c p{margin-top:6px; font-size:15px; line-height:1.55; color:#5b6b78;}
.t1 .skw-c p, .t4 .skw-c p{color:#a9b8c4;}
/* 1: sign-ups land in the roster, one after another */
.bx{width:100%; max-width:520px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.bx-h{display:flex; justify-content:space-between; align-items:baseline; padding:2px 4px 10px; border-bottom:1px solid rgba(255,255,255,.08);}
.bx-h b{font-size:13.5px;} .bx-h span{font-size:12px; color:#9fb2c0;} .bx-h em{font-style:normal; font-family:var(--pc-display,Anton),sans-serif; font-size:18px; color:#5fd4cf; margin-right:4px;}
.bx-r{display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid rgba(255,255,255,.06); opacity:0; transform:translateX(-18px);}
.bx-r:last-child{border-bottom:0;}
.bx-av{display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; background:#1c3346; font-size:10.5px; font-weight:800; color:#cfe6e4;}
.bx-r b{flex:1; font-size:13.5px; font-weight:600;}
.bx-r .sk-chip{font-style:normal;} .bx-r small{width:42px; text-align:right; font-size:11px; color:#7f93a3;}
.skw-grid.in .bx-r{animation:bx-in .55s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .16s) both;}
@keyframes bx-in{to{opacity:1; transform:none;}}
/* 2: the bars settle level, inside the 4 to 6 band */
.bb{position:relative; width:100%; max-width:400px;}
.bb-bars{position:relative; display:flex; align-items:flex-end; gap:8px; height:190px;}
.bb-bars i{flex:1; height:calc(var(--h0) * 30px); border-radius:5px 5px 2px 2px; background:#9fd1ce; transition:height 1.1s cubic-bezier(.3,1.3,.5,1) calc(var(--i) * .05s), background .6s;}
.skw-grid.in .bb-bars i{height:calc(var(--h) * 30px); background:#007a76;}
.bb-band{position:absolute; left:-6px; right:-6px; bottom:calc(4 * 30px); height:60px; border-radius:6px; background:rgba(0,122,118,.08); border-top:1px dashed rgba(0,122,118,.45); border-bottom:1px dashed rgba(0,122,118,.45);}
.bb-band span{position:absolute; right:6px; top:-22px; font-size:11.5px; font-weight:700; color:#00726f;}
.bb-x{display:flex; justify-content:space-between; margin-top:10px; font-size:11.5px; color:#7a8a96;}
/* 3: a pitching chart, two innings each, no more */
.bp{width:100%; max-width:420px; padding:14px 16px; border-radius:12px; background:#fffdf8; box-shadow:0 1px 0 #e7dcc6, 0 18px 34px -22px rgba(90,60,20,.45);}
.bp-h, .bp-r{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(6,28px) 34px; align-items:center; gap:6px;}
.bp-h{padding-bottom:8px; border-bottom:2px solid #2b2216; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8a7a60;}
.bp-h b{font-size:10.5px; color:#2b2216;} .bp-h span{text-align:center;} .bp-h em{font-style:normal; text-align:center; color:#b42318;}
.bp-r{height:44px; border-bottom:1px solid #efe6d4;}
.bp-r:last-child{border-bottom:0;}
.bp-r b{font-size:13px; font-weight:700; color:#2b2216; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bp-r span{display:grid; place-items:center; height:28px; border-radius:50%; background:#f3ead8;}
.bp-r span svg{width:20px; height:20px; fill:#fff; stroke:#c0392b; stroke-width:1.3; stroke-linecap:round; opacity:0; transform:scale(.4) rotate(-90deg);}
.bp-r span.on{background:transparent;}
.skw-grid.in .bp-r span svg{opacity:1; transform:none; transition:opacity .3s, transform .5s cubic-bezier(.2,1.4,.4,1); transition-delay:calc(.3s + var(--k) * .035s);}
.bp-r span.on svg circle{stroke:#d9cdb5;}
.bp-r em{font-style:normal; font-family:var(--pc-display,Anton),sans-serif; font-size:18px; text-align:center; color:#2b2216;}
/* 4: the nine positions, each camper on their own spot */
.bf{position:relative; width:100%; max-width:520px; height:250px;}
.bf-d{position:absolute; inset:0; width:100%; height:100%;}
.bf-d path{fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.35); stroke-width:.4; vector-effect:non-scaling-stroke;}
.bf-d .bf-l{fill:none; stroke:rgba(255,255,255,.18);}
.bf-p{position:absolute; display:flex; align-items:center; gap:6px; padding:4px 10px 4px 4px; border-radius:99px; background:#fff; transform:translate(-50%,-50%) scale(.85); opacity:0;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.6); white-space:nowrap;}
.bf-p .sk-chip{font-style:normal; min-width:28px; padding:3px 5px; font-size:10.5px; font-family:Archivo,sans-serif;}
.bf-p b{font-size:12px; font-weight:700; color:var(--pc-ink);}
.skw-grid.in .bf-p{opacity:1; transform:translate(-50%,-50%); transition:opacity .35s, transform .5s cubic-bezier(.2,1.4,.4,1); transition-delay:calc(.2s + var(--k) * .12s);}
.bf-s{position:absolute; left:28px; top:24px; font-size:12px; color:#a9c8bd;}
.bf-s b{display:block; font-family:var(--pc-display,Anton),sans-serif; font-weight:400; font-size:30px; line-height:1; color:#fff;}
@media (prefers-reduced-motion:reduce){ .skw-grid *{animation:none !important; transition:none !important;} .bx-r{opacity:1; transform:none;} }
@media (max-width:1100px){ .t1,.t2,.t3,.t4{grid-column:span 6;} }
@media (max-width:760px){
  .skw-grid{grid-template-columns:1fr; gap:16px;} .t1,.t2,.t3,.t4{grid-column:auto;}
  .skw-art{height:auto; min-height:250px; padding:22px 16px 0;} .skw-c{padding:18px 20px 22px;}
  .bx-r small{display:none;} .bp-h, .bp-r{grid-template-columns:minmax(0,1.4fr) repeat(6,22px) 26px; gap:4px;} .bp-r span{height:22px;} .bp-r span svg{width:16px; height:16px;}
  .bf{height:230px;} .bf-p b{display:none;} .bf-p{padding:3px;} .bf-s{position:static; margin:-6px 0 6px; justify-self:start;}
}
.skw-art{height:auto; min-height:300px; padding-bottom:4px;}
.bb-band{bottom:120px; left:-8px; right:-8px; z-index:0;}
.bb-bars i{position:relative; z-index:1;}
.bb-band span{left:8px; right:auto; top:-24px;}

/* ---- tile 2, Stripe style (Mehul 2026-10-19): a soft gradient mesh behind a clean white chart card;
   thin gradient bars on hairline gridlines, one bar picked out with its value ---- */
.t2{background:#f6f9fb;}
.t2::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(55% 60% at 100% 0%, rgba(95,212,207,.45), transparent 70%), radial-gradient(50% 55% at 0% 100%, rgba(120,150,255,.28), transparent 70%), radial-gradient(40% 40% at 80% 90%, rgba(255,203,92,.25), transparent 70%);}
.sc{width:100%; max-width:420px; padding:18px 20px 14px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 24px 44px -24px rgba(13,40,60,.35);}
.sc-h{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px;}
.sc-h small{display:block; font-size:12px; font-weight:600; color:#62707c;}
.sc-h b{font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--pc-ink); font-variant-numeric:tabular-nums;}
.sc-h i{margin-left:4px; font-style:normal; font-size:13px; color:#62707c;}
.sc-pill{padding:4px 10px; border-radius:99px; background:#eef6f5; font-size:11.5px; font-weight:700; color:#00726f;}
.sc-plot{position:relative; height:150px; padding-left:22px;}
.sc-grid{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;}
.sc-grid span{position:relative; height:0; font-size:10px; color:#62707c; line-height:0;}
.sc-grid span::after{content:""; position:absolute; left:22px; right:0; top:0; border-top:1px solid #edf1f4;}
.sc-grid span:nth-child(2)::after{border-top:1px dashed #9fd1ce;}
.sc-bars{position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:6px; height:100%;}
.sc-bars i{position:relative; flex:1; max-width:14px; height:calc(var(--h0) / 6 * 100%); border-radius:4px 4px 1px 1px;
  background:linear-gradient(180deg,#5fd4cf,#007a76); opacity:.9; transition:height 1.1s cubic-bezier(.3,1.25,.5,1) calc(var(--i) * .05s);}
.skw-grid.in .sc-bars i{height:calc(var(--h) / 6 * 100%);}
.sc-bars i.hl{background:linear-gradient(180deg,#0d1b2a,#24435c); opacity:1;}
.sc-bars i em{position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); padding:5px 9px; border-radius:7px; background:#0d1b2a; color:#cfdbe4;
  font-style:normal; font-size:11px; white-space:nowrap; box-shadow:0 8px 16px -8px rgba(0,0,0,.5); opacity:0; transition:opacity .4s 1.2s;}
.sc-bars i em b{color:#fff; font-weight:700;}
.skw-grid.in .sc-bars i em{opacity:1;}
.sc-x{display:flex; justify-content:space-between; margin-top:8px; padding-left:22px; font-size:11px; color:#62707c;}
@media (max-width:760px){ .sc-bars{gap:4px;} .sc-bars i{max-width:12px;} }

/* ---- four rules, Stripe style (Mehul 2026-10-19): each picture sits on a vivid gradient panel with a white card on it;
   the title and line sit under the panel on white. The field keeps green. ---- */
.skw-t{background:none !important; color:var(--pc-ink); border-radius:0; overflow:visible;}
.skw-t::before{display:none;}
.skw-art{min-height:340px; padding:32px; border-radius:18px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(13,27,42,.05);}
.t1 .skw-art{background:linear-gradient(160deg,#d9f4f1 0%,#8fd9d3 30%,#3fb3b8 58%,#2f7fd0 100%);}
.t2 .skw-art{background:linear-gradient(170deg,#fff3dc 0%,#f6c88f 28%,#f2a7a3 52%,#c87be8 78%,#9a7cf6 100%);}
.t3 .skw-art{background:linear-gradient(165deg,#fff1d6 0%,#ffd38a 30%,#f6a25f 58%,#e2675a 100%);}
.t4 .skw-art{background:linear-gradient(165deg,#e3f7e8 0%,#9fdfb4 26%,#3fae7a 55%,#137a55 80%,#0b5a42 100%);}
.skw-c{padding:22px 4px 0;}
.skw-c h3{font-size:19px; color:var(--pc-ink) !important;}
.skw-c p, .t1 .skw-c p, .t4 .skw-c p{color:#5b6b78;}
/* the white cards */
.bx, .sc, .bp{border-radius:12px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 20px 40px -22px rgba(13,27,42,.45);}
.bx{padding:16px 18px;}
.bx-h{border-bottom-color:#eef2f4;} .bx-h b{color:var(--pc-ink);} .bx-h span{color:#7a8a96;} .bx-h em{color:#00726f;}
.bx-r{border-bottom-color:#f1f4f6;} .bx-r b{color:var(--pc-ink);} .bx-av{background:#eef4f6; color:#41505d;} .bx-r small{color:#62707c;}
/* 2: Stripe's chart, a label, one big number, thin solid bars, nothing else */
.sc{max-width:440px; padding:22px 24px 26px;}
.sc-l{display:block; font-size:14px; color:#5b6b78;}
.sc-n{display:block; margin-top:4px; font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--pc-ink); font-variant-numeric:tabular-nums;}
.sc-n i{font-style:normal; font-size:14px; font-weight:500; color:#62707c;}
.sc-bars{display:flex; align-items:flex-end; justify-content:space-between; gap:0; height:170px; margin-top:22px; padding:0 4px;}
.sc-bars i{flex:none; width:7px; max-width:none; height:0; border-radius:1px; background:#8b7cf6; opacity:1;
  transition:height .9s cubic-bezier(.3,1.2,.5,1) calc(var(--i) * .025s);}
.skw-grid.in .sc-bars i{height:calc(var(--h) / 6 * 100%);}
/* 3: the chart card keeps its scorebook look */
.bp{background:#fffdf8;}
/* 4: the field on green, Stripe style: chips stay white, the stat in white */
.t4 .bf-d path{fill:rgba(255,255,255,.12); stroke:rgba(255,255,255,.7);}
.t4 .bf-d .bf-l{stroke:rgba(255,255,255,.4);}
.t4 .bf-s{left:32px; top:28px; color:rgba(255,255,255,.85);}
@media (max-width:760px){ .skw-art{padding:20px 14px; min-height:0;} .sc{padding:18px 18px 20px;} .sc-bars{height:140px;} .sc-bars i{width:5px;} .skw-c{padding:16px 2px 4px;} }
.t4 .bf-s{color:#1e5a40;} .t4 .bf-s b{color:#0b3b2a;}
@media (max-width:760px){ .t4 .bf-s{color:rgba(255,255,255,.85);} .t4 .bf-s b{color:#fff;} }

/* ---- four rules, third pass (Mehul 2026-10-19: not one style in four colours): each tile its own treatment.
   1 dark product panel, 2 Stripe gradient with a white chart card, 3 a flat scorebook page, 4 the green field ---- */
/* 1: back to the dark panel, the roster in the app's dark theme */
.t1 .skw-art{background:#0d1b2a; box-shadow:none;}
.t1 .skw-art::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 70% at 85% 0%, rgba(0,122,118,.5), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(47,127,208,.25), transparent 70%);}
.t1 .bx{position:relative; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);}
.t1 .bx-h{border-bottom-color:rgba(255,255,255,.08);} .t1 .bx-h b{color:#fff;} .t1 .bx-h span{color:#9fb2c0;} .t1 .bx-h em{color:#5fd4cf;}
.t1 .bx-r{border-bottom-color:rgba(255,255,255,.06);} .t1 .bx-r b{color:#fff;} .t1 .bx-av{background:#1c3346; color:#cfe6e4;} .t1 .bx-r small{color:#7f93a3;}
/* 2: one bar per camper, sorted; the steps at each end are the only spread */
.sc-bars{gap:1px; padding:0; height:150px;}
.sc-bars i{flex:1; width:auto; border-radius:1px 1px 0 0; transition-delay:calc(var(--i) * .006s);}
.sc-bars i:nth-child(-n+8){background:#c3b9fb;} .sc-bars i:nth-child(n+119){background:#5b47e0;}
.sc-k{display:flex; gap:1px; margin-top:8px;}
.sc-k span{min-width:0; font-size:11px; color:#7a8a96; white-space:nowrap; text-align:center;}
.sc-k span:first-child{text-align:left;} .sc-k span:last-child{text-align:right;}
.sc-k b{color:var(--pc-ink); font-weight:700;}
.sc-n i{font-size:13px;}
/* 3: a flat scorebook page: cream paper, ruled lines, a red margin, the chart printed straight onto it */
.t3 .skw-art{background:#f8f1e3 repeating-linear-gradient(transparent 0 31px, #ebdfc8 31px 32px); box-shadow:inset 0 0 0 1px #eadfca;}
.t3 .skw-art::before{content:""; position:absolute; left:46px; top:0; bottom:0; border-left:1.5px solid rgba(198,40,40,.35);}
.t3 .bp{position:relative; background:transparent; box-shadow:none; padding:4px 6px 4px 30px;}
.t3 .bp-r{border-bottom-color:transparent;}
@media (max-width:760px){ .t3 .skw-art::before{left:22px;} .t3 .bp{padding-left:16px;} .sc-k span{font-size:10px;} }
/* 2, again: a histogram of innings played, the same split the scheduler's Field Time card shows (8 at 4, 110 at 5, 10 at 6) */
.sh-plot{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; height:170px; margin-top:26px; padding-top:30px;}
.hb{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end;}
.hb i{position:relative; display:block; width:100%; max-width:30px; height:0; border-radius:3px 3px 1px 1px; background:#c3b9fb;
  transition:height 1s cubic-bezier(.3,1.2,.5,1) calc(var(--i) * .06s);}
.skw-grid.in .hb i{height:max(3px, calc(var(--v) / 110 * (100% - 22px)));}
.hb.z i{background:#e4e8ec;}
.hb.pk i{background:#6e58f0;}
.hb small{font-size:11px; color:#62707c; font-variant-numeric:tabular-nums;}
.hb em{position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); padding:5px 9px; border-radius:7px; background:#0d1b2a; color:#cfdbe4;
  font-style:normal; font-size:11px; white-space:nowrap; opacity:0; transition:opacity .4s 1s;}
.hb em b{color:#fff;} .skw-grid.in .hb em{opacity:1;}
.sh-ax{margin-top:6px; text-align:center; font-size:11px; color:#62707c;}
@media (max-width:760px){ .hb em{left:auto; right:-8px; transform:none;} }

/* ---- every camper, checked: one dark stage. The lineup on the left, four camp-wide checks on the right.
   .g grab, .m moved, .x conflict, .b back: a pitcher is dragged into a cell that breaks the pitching rule, then put back ---- */
.ck{background:#f6f8f9;}
.ck .pc-sh{max-width:24em;}
.ck-stage{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:40px; align-items:center; margin-top:44px; padding:56px; border-radius:22px; overflow:hidden; isolation:isolate;
  background:#0b1622;}
.ck-stage::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(50% 70% at 20% 30%, rgba(0,122,118,.35), transparent 70%), radial-gradient(40% 60% at 95% 100%, rgba(110,88,240,.25), transparent 70%),
  linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/32px 32px, linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/32px 32px;}
.ck-app{width:max-content; padding:18px 20px 16px; border-radius:16px; background:#fff; box-shadow:0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);}
.ck-h{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:10px;}
.ck-h > span{display:flex; align-items:center; gap:10px;} .ck-h b{font-size:15px; color:var(--pc-ink);}
.ck-hint{font-style:normal; font-size:12px; color:#62707c;}
.ck-r{display:grid; grid-template-columns:150px repeat(6,56px); align-items:center; height:52px; border-top:1px solid #eef2f4;}
.ck-r > b{font-size:13.5px; font-weight:700; color:var(--pc-ink); white-space:nowrap;}
.ck-th{height:32px; border-top:0; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#62707c;}
.ck-th > b{font-size:10.5px; font-weight:800; color:#62707c;} .ck-th span{text-align:center;}
.ck-r .cell{position:relative; display:grid; place-items:center; height:100%; border-radius:8px; transition:background .25s, box-shadow .25s;}
.ck-r .cell .sk-chip{font-style:normal; min-width:34px; transition:opacity .2s;}
.ck-body{position:relative;}
.ck-float{position:absolute; z-index:3; left:calc(150px + 4 * 56px + 11px); top:calc(2 * 52px + 13px); min-width:34px; font-style:normal; text-align:center;
  opacity:0; transition:transform .7s cubic-bezier(.45,0,.2,1), box-shadow .25s, opacity .15s, background .25s, color .25s, border-color .25s;}
.ck-cur{position:absolute; z-index:4; left:calc(150px + 4 * 56px + 32px); top:calc(2 * 52px + 28px); width:22px; height:22px; fill:#0d1b2a; stroke:#fff; stroke-width:1.6; stroke-linejoin:round;
  opacity:0; transform:translate(30px,40px); transition:transform .7s cubic-bezier(.45,0,.2,1), opacity .3s; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));}
.ck-stage .drop .sk-chip{opacity:1;}
/* grab */
.ck-stage.g .ck-cur{opacity:1; transform:none;}
.ck-stage.g .from .sk-chip{opacity:0;} .ck-stage.g .from{box-shadow:inset 0 0 0 1.5px #cfd8de; background:repeating-linear-gradient(45deg,#f6f8f9 0 4px,#fff 4px 8px);}
.ck-stage.g .ck-float{opacity:1; transform:scale(1.12); box-shadow:0 10px 18px -6px rgba(13,27,42,.45);}
/* moved up one row, onto Jonah's 5th inning */
.ck-stage.m .ck-float{transform:translateY(-52px) scale(1.12);}
.ck-stage.m .ck-cur{transform:translateY(-52px);}
.ck-stage.m .drop .sk-chip{opacity:0;}
/* conflict */
.ck-stage.x .ck-float{background:#fdecec; border-color:#f3a5a0; color:#b42318; box-shadow:0 0 0 3px rgba(198,40,40,.18), 0 10px 18px -6px rgba(180,35,24,.4);}
.ck-stage.x .drop{background:#fff4f3;}
/* back */
.ck-stage.b .ck-float{transform:scale(1.12);} .ck-stage.b .ck-cur{transform:none;}
.ck-stage.b .drop .sk-chip{opacity:1;}
/* the rail */
.ck-rail{color:#fff; min-width:0;}
.ck-score{display:flex; align-items:baseline; gap:12px; padding-bottom:18px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.1);}
.ck-score b{position:relative; display:inline-block; width:.6em; font-family:var(--pc-display,Anton),sans-serif; font-weight:400; font-size:64px; line-height:1;}
.ck-score b span{position:absolute; left:0; bottom:0; transition:opacity .3s, transform .3s;}
.ck-score .ok{color:#5fd4cf;} .ck-score .bad{color:#ff8a80; opacity:0; transform:translateY(10px);}
.ck-stage.x .ck-score .ok{opacity:0; transform:translateY(-10px);} .ck-stage.x .ck-score .bad{opacity:1; transform:none;}
.ck-score small{font-size:14px; color:#a9b8c4;}
.ck-rail ul{margin:0; padding:0; list-style:none;}
.ck-c{display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); transition:color .3s;}
.ck-c:last-child{border-bottom:0;}
.ck-l{position:relative; flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(95,212,207,.16); color:#5fd4cf; transition:background .3s, color .3s, box-shadow .3s;}
.ck-l svg{position:absolute; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transition:opacity .2s, transform .3s;}
.ck-l svg:last-child{opacity:0; transform:scale(.5);}
.ck-c b{display:block; font-size:15px; font-weight:700; color:#fff;}
.ck-c small{display:block; max-height:0; overflow:hidden; font-size:13px; color:#ffb3ab; transition:max-height .35s, margin .35s;}
.ck-stage.x .ck-c.pit .ck-l{background:rgba(255,138,128,.18); color:#ff8a80; box-shadow:0 0 0 6px rgba(255,138,128,.08);}
.ck-stage.x .ck-c.pit .ck-l svg:first-child{opacity:0; transform:scale(.5);}
.ck-stage.x .ck-c.pit .ck-l svg:last-child{opacity:1; transform:none;}
.ck-stage.x .ck-c.pit small{max-height:40px; margin-top:3px;}
@media (max-width:1100px){ .ck-stage{grid-template-columns:1fr; padding:36px; justify-items:center;} .ck-rail{width:100%; max-width:560px;} }
@media (max-width:640px){ .ck-stage{padding:20px 12px 24px; gap:26px;} .ck-app{zoom:.64;} .ck-score b{font-size:48px;} .ck-c b{font-size:14px;} .ck-rail{padding:0 6px;} }
.ck-score b{display:inline-grid; width:auto;} .ck-score b span{position:static; grid-area:1/1;}

/* ---- every camper, checked, Stripe's frame (Mehul 2026-10-19): a white frame with the title in its corner, fine hatch-line
   gradients in two corners, the admin window on the right cut by the frame, the camp-wide check card overlapping it ---- */
.ck{background:#f6f8f9;}
.ck-stage{display:block; position:relative; height:620px; margin-top:0; padding:0; border-radius:16px; background:#fff; overflow:hidden; isolation:isolate;
  box-shadow:0 0 0 1px #e6ecef;}
.ck-stage::before{display:none;}
.ck-hatch{position:absolute; z-index:-1; pointer-events:none;}
.ck-hatch.a{left:0; bottom:0; width:58%; height:62%;
  background:repeating-linear-gradient(-32deg, transparent 0 7px, rgba(0,122,118,.55) 7px 8px), linear-gradient(20deg,#007a76,#5fd4cf 60%,transparent);
  -webkit-mask-image:linear-gradient(32deg,#000 10%,transparent 62%); mask-image:linear-gradient(32deg,#000 10%,transparent 62%); opacity:.75;}
.ck-hatch.b{right:0; top:0; width:62%; height:70%;
  background:repeating-linear-gradient(-32deg, transparent 0 7px, rgba(110,88,240,.5) 7px 8px), linear-gradient(200deg,#6e58f0,#9fb8ff 55%,transparent);
  -webkit-mask-image:linear-gradient(212deg,#000 12%,transparent 58%); mask-image:linear-gradient(212deg,#000 12%,transparent 58%); opacity:.7;}
.ck-t{position:absolute; left:40px; top:36px; font-size:clamp(28px,2.6vw,38px); font-weight:500; line-height:1.15; letter-spacing:-.02em; color:var(--pc-ink);}
/* the admin window */
.ck-win{position:absolute; left:36%; right:26px; top:26px; bottom:-30px; border-radius:12px; background:rgba(255,255,255,.7); box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 30px 60px -30px rgba(13,27,42,.35); overflow:hidden; backdrop-filter:blur(6px);}
.ck-chrome{display:flex; align-items:center; gap:7px; height:44px; padding:0 16px; }
.ck-chrome i{width:10px; height:10px; border-radius:50%; background:#dfe4e8;}
.ck-chrome span{margin:0 auto; padding:5px 18px; border-radius:99px; background:rgba(13,27,42,.04); font-size:12.5px; color:#5b6b78;}
.ck-shell{display:grid; grid-template-columns:200px minmax(0,1fr); height:calc(100% - 44px); margin:0 8px; border-radius:10px 10px 0 0; background:#fff; box-shadow:0 0 0 1px #eef2f4;}
.ck-side{padding:22px 18px; border-right:1px solid #eef2f4;}
.ck-brand{display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:700; color:var(--pc-ink);}
.ck-brand b{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#0d1b2a; color:#fff; font-size:11px;}
.ck-side ul{margin:22px 0 0; padding:0; list-style:none;}
.ck-side li{padding:8px 10px; border-radius:7px; font-size:13.5px; color:#5b6b78;}
.ck-side li.on{background:#eef6f5; color:#00726f; font-weight:700;}
.ck-main{padding:26px 28px; min-width:0;}
.ck-mh{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.ck-mh b{font-size:20px; font-weight:600; color:var(--pc-ink);}
.ck-mh span{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--pc-ink);}
.ck-app{width:max-content; padding:0; border-radius:0; background:none; box-shadow:none;}
/* the check card, overlapping the window */
.ck-rail{position:absolute; z-index:2; left:18%; top:170px; width:380px; padding:22px 24px 10px; border-radius:12px; background:#fff; color:var(--pc-ink);
  box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 30px 60px -24px rgba(13,27,42,.4);}
.ck-rh{display:flex; justify-content:space-between; align-items:baseline;}
.ck-rh b{font-size:17px; font-weight:600;} .ck-rh small{font-size:12px; color:#62707c;}
.ck-score{margin-top:12px; padding-bottom:12px; border-bottom-color:#eef2f4;}
.ck-score b{font-size:46px;} .ck-score .ok{color:#007a76;} .ck-score .bad{color:#d92d20;} .ck-score small{color:#62707c;}
.ck-c{padding:12px 0; border-bottom-color:#f1f4f6;}
.ck-c b{font-size:14.5px; font-weight:600; color:var(--pc-ink);}
.ck-l{background:#e7f5f3; color:#007a76;}
.ck-c small{color:#b42318;}
.ck-stage.x .ck-c.pit .ck-l{background:#fdecec; color:#d92d20; box-shadow:0 0 0 5px rgba(217,45,32,.08);}
@media (max-width:1240px){ .ck-win{left:30%;} .ck-rail{left:5%;} }
@media (max-width:980px){
  .ck-stage{height:auto; padding:28px 18px 24px;}
  .ck-t{position:static; margin-bottom:22px; padding-left:6px;}
  .ck-win{position:relative; left:auto; right:auto; top:auto; bottom:auto; height:400px;}
  .ck-side{display:none;} .ck-shell{grid-template-columns:1fr;}
  .ck-rail{position:relative; left:auto; top:auto; width:auto; max-width:440px; margin:-60px auto 0;}
}
@media (max-width:640px){ .ck-win{height:300px;} .ck-main{padding:16px 12px;} .ck-app{zoom:.6;} .ck-mh b{font-size:16px;} .ck-rail{margin-top:-40px; padding:18px 18px 6px;} }
.ck-hatch.a, .ck-hatch.b{width:100%; height:100%;}
.ck-hatch.a{left:0; bottom:0; -webkit-mask-image:linear-gradient(38deg,#000 0%,rgba(0,0,0,.6) 22%,transparent 46%); mask-image:linear-gradient(38deg,#000 0%,rgba(0,0,0,.6) 22%,transparent 46%);}
.ck-hatch.b{right:0; top:0; -webkit-mask-image:linear-gradient(218deg,#000 0%,rgba(0,0,0,.6) 20%,transparent 44%); mask-image:linear-gradient(218deg,#000 0%,rgba(0,0,0,.6) 20%,transparent 44%);}
@media (max-width:640px){ .ck-t{text-align:left; font-size:28px;} .ck-rh{flex-direction:column; gap:2px;} }
/* hatch, as in Stripe's frame: only hairlines, coloured by a gradient, fading out across the frame; no wash behind them */
.ck-hatch{opacity:1 !important;}
.ck-hatch.a{background:linear-gradient(55deg,#00605d 0%,#007a76 25%,#5fd4cf 60%);
  -webkit-mask-image:repeating-linear-gradient(-34deg,transparent 0 6px,#000 6px 7px), linear-gradient(36deg,#000 0%,rgba(0,0,0,.85) 18%,transparent 44%);
  -webkit-mask-composite:source-in; mask-image:repeating-linear-gradient(-34deg,transparent 0 6px,#000 6px 7px), linear-gradient(36deg,#000 0%,rgba(0,0,0,.85) 18%,transparent 44%); mask-composite:intersect;}
.ck-hatch.b{background:linear-gradient(235deg,#5b47e0 0%,#7a68f2 25%,#b7c2ff 60%);
  -webkit-mask-image:repeating-linear-gradient(-34deg,transparent 0 6px,#000 6px 7px), linear-gradient(216deg,#000 0%,rgba(0,0,0,.85) 18%,transparent 44%);
  -webkit-mask-composite:source-in; mask-image:repeating-linear-gradient(-34deg,transparent 0 6px,#000 6px 7px), linear-gradient(216deg,#000 0%,rgba(0,0,0,.85) 18%,transparent 44%); mask-composite:intersect;}
.ck-hatch.a{-webkit-mask-image:repeating-linear-gradient(-34deg,transparent 0 6px,#000 6px 7px), linear-gradient(36deg,#000 0%,rgba(0,0,0,.7) 12%,transparent 30%);
  mask-image:repeating-linear-gradient(-34deg,transparent 0 6px,#000 6px 7px), linear-gradient(36deg,#000 0%,rgba(0,0,0,.7) 12%,transparent 30%);}
.ck-hatch.b{-webkit-mask-image:repeating-linear-gradient(-34deg,transparent 0 6px,#000 6px 7px), linear-gradient(216deg,#000 0%,rgba(0,0,0,.7) 12%,transparent 30%);
  mask-image:repeating-linear-gradient(-34deg,transparent 0 6px,#000 6px 7px), linear-gradient(216deg,#000 0%,rgba(0,0,0,.7) 12%,transparent 30%);}
/* a solid wash right in the two corners, as Stripe has behind its hairlines */
.ck-stage::after{content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(28% 34% at 0% 100%, rgba(0,122,118,.55), transparent 70%), radial-gradient(30% 36% at 100% 0%, rgba(110,88,240,.5), transparent 70%);}
/* Stripe's fan, bottom-left: hairlines spreading from the window's lower-left corner, colour strongest at that corner */
.ck-fan{position:absolute; z-index:-1; inset:0; width:100%; height:100%; pointer-events:none;}
.ck-fan-l path{fill:none; stroke:url(#ck-fl) !important; stroke-width:1; vector-effect:non-scaling-stroke;}
.ck-fan-w{fill:url(#ck-fw); stroke:none !important;}
.ck-stage::after{background:radial-gradient(30% 36% at 100% 0%, rgba(110,88,240,.5), transparent 70%);}
/* only the logo shows in the window's sidebar, as in Stripe's */
.ck-side ul{display:none;}
@media (max-width:980px){ .ck-fan{display:none;} }

/* ---- game day (2026-10-19): the whole day on a timeline, two field lanes, games settle into place, lunch across both;
   then Print deals a lineup card for every team out of the slot into a fan ---- */
.gd{position:relative; margin-top:44px; padding:30px 34px 0; border-radius:22px; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,#f2f7fb 0%,#ffffff 46%,#eef6f4 100%); box-shadow:0 0 0 1px #e3eaee;}
.gd::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(45% 55% at 100% 0%, rgba(95,212,207,.22), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(110,88,240,.12), transparent 70%);}
.gd-top{display:flex; align-items:center; justify-content:space-between; gap:20px;}
.gd-top b{display:block; font-size:18px; font-weight:700; color:var(--pc-ink);}
.gd-top small{font-size:13px; color:#62707c;}
.gd-btns{display:flex; gap:10px;}
.gd-b{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:9px; background:#fff; box-shadow:0 0 0 1px #dfe6ea; font-size:13.5px; font-weight:700; color:var(--pc-ink); white-space:nowrap;}
.gd-b svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.gd-b.dark{background:#0d1b2a; color:#fff; box-shadow:0 8px 18px -8px rgba(13,27,42,.6); transition:transform .15s, background .3s;}
.gd.press .gd-b.dark{transform:scale(.95); background:#00726f;}
/* timeline */
.gd-tl{position:relative; margin-top:26px; padding-left:76px;}
.gd-ticks{position:relative; height:22px; border-bottom:1px solid #e3eaee;}
.gd-ticks span{position:absolute; transform:translateX(-50%); font-size:11px; font-weight:600; color:#62707c;}
.gd-ticks span::after{content:""; position:absolute; left:50%; top:20px; height:132px; border-left:1px dashed #e6ecef;}
.gd-lanes{position:relative;}
.gd-lane{position:relative; height:64px; border-bottom:1px solid #eef2f4;}
.gd-lane > i{position:absolute; left:-76px; top:50%; transform:translateY(-50%); font-style:normal; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#41505d;}
.gd-g{position:absolute; top:10px; bottom:10px; display:flex; flex-direction:column; justify-content:center; padding:0 12px; border-radius:10px; overflow:hidden;
  background:#fff; box-shadow:inset 3px 0 0 #007a76, 0 0 0 1px #dfe9ec, 0 8px 16px -10px rgba(0,60,58,.4); opacity:0; transform:translateY(10px);
  transition:opacity .4s, transform .5s cubic-bezier(.2,1.2,.4,1); transition-delay:calc(var(--k) * .14s);}
.gd-g b{font-size:12.5px; color:var(--pc-ink);} .gd-g small{font-size:11.5px; color:#62707c; white-space:nowrap;}
.gd-g em{position:absolute; right:10px; top:9px; font-style:normal; font-size:10.5px; font-weight:700; color:#00726f;}
.gd-lunch{position:absolute; top:0; bottom:0; z-index:0; background:repeating-linear-gradient(-45deg,#fff7e8 0 6px,#fdf0d8 6px 12px); border-left:1px solid #f1d9a8; border-right:1px solid #f1d9a8;}
.gd-lunch b{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-90deg); font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#a86a00;}
.gd.in .gd-g{opacity:1; transform:none;}
/* the printout */
.gd-out{position:relative; height:270px; margin:28px -34px 0; }
.gd-slot{position:absolute; left:50%; top:0; width:min(720px,86%); height:14px; transform:translateX(-50%); border-radius:8px; background:#0d1b2a; box-shadow:inset 0 2px 5px rgba(0,0,0,.6);}
.gd-fan{position:absolute; left:50%; top:4px; width:0; height:100%;}
.gd-card{position:absolute; left:-110px; top:0; width:220px; padding:14px 14px 10px; border-radius:6px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 18px 30px -16px rgba(13,27,42,.5);
  transform-origin:50% 0; clip-path:inset(0 0 100% 0); transition:clip-path .6s ease, transform .8s cubic-bezier(.2,1,.3,1); transition-delay:calc(var(--k) * .22s);}
.gd-ch{padding-bottom:7px; margin-bottom:4px; border-bottom:2px solid #0d1b2a;}
.gd-ch b{display:block; font-family:var(--pc-display,Anton),sans-serif; font-weight:400; font-size:16px; letter-spacing:.04em; text-transform:uppercase; color:var(--pc-ink);}
.gd-ch small{font-size:10.5px; color:#62707c;}
.gd-card > div:not(.gd-ch){display:grid; grid-template-columns:14px 1fr auto; align-items:center; gap:6px; height:27px; border-bottom:1px solid #f0f3f5; font-size:11.5px;}
.gd-card > div span{font-size:10px; color:#62707c;} .gd-card > div b{font-weight:600; color:var(--pc-ink);}
.gd-card .sk-chip{font-style:normal; min-width:28px; font-size:10px; padding:2px 4px;}
.gd.dealt .gd-card{clip-path:inset(-20px -20px -40px -20px);}
.gd.dealt .gd-card:nth-child(1){transform:translate(-470px,46px) rotate(-9deg);}
.gd.dealt .gd-card:nth-child(2){transform:translate(-238px,26px) rotate(-4.5deg);}
.gd.dealt .gd-card:nth-child(3){transform:translate(0,18px) rotate(0);}
.gd.dealt .gd-card:nth-child(4){transform:translate(238px,26px) rotate(4.5deg);}
.gd.dealt .gd-card:nth-child(5){transform:translate(470px,46px) rotate(9deg);}
.gd-more{position:absolute; left:50%; bottom:20px; transform:translateX(-50%); padding:6px 12px; border-radius:99px; background:#0d1b2a; color:#fff; font-size:12px; font-weight:700; white-space:nowrap; opacity:0; transition:opacity .4s 1.4s;}
.gd.dealt .gd-more{opacity:1;}
.gd-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:30px;}
.gd-cols > div{padding-left:18px; border-left:1px solid #e3e9ec; position:relative;}
.gd-cols > div::before{content:""; position:absolute; left:-1px; top:2px; width:2px; height:22px; background:#007a76;}
.gd-cols b{font-size:17px; font-weight:800; color:var(--pc-ink);} .gd-cols p{margin-top:4px; font-size:15px; color:#5b6b78;}
@media (prefers-reduced-motion:reduce){ .gd *{transition:none !important;} }
@media (max-width:1100px){
  .gd.dealt .gd-card:nth-child(1){transform:translate(-330px,46px) rotate(-9deg);} .gd.dealt .gd-card:nth-child(2){transform:translate(-165px,26px) rotate(-4.5deg);}
  .gd.dealt .gd-card:nth-child(4){transform:translate(165px,26px) rotate(4.5deg);} .gd.dealt .gd-card:nth-child(5){transform:translate(330px,46px) rotate(9deg);}
}
@media (max-width:760px){
  .gd{padding:22px 14px 0;} .gd-top{flex-direction:column; align-items:flex-start;} .gd-btns{width:100%;} .gd-b{flex:1; justify-content:center; padding:9px 8px; font-size:12.5px;}
  .gd-tl{padding-left:52px; overflow:hidden;} .gd-lane > i{left:-52px; font-size:10.5px;} .gd-ticks span:nth-child(even){display:none;}
  .gd-g{padding:0 6px;} .gd-g small{display:none;} .gd-g em{position:static; font-size:10px;} .gd-g b{font-size:11.5px;}
  .gd-out{height:240px; margin:22px -14px 0;}
  .gd-card{zoom:.82;}
  .gd.dealt .gd-card:nth-child(1){transform:translate(-150px,52px) rotate(-10deg);} .gd.dealt .gd-card:nth-child(2){transform:translate(-75px,30px) rotate(-5deg);}
  .gd.dealt .gd-card:nth-child(4){transform:translate(75px,30px) rotate(5deg);} .gd.dealt .gd-card:nth-child(5){transform:translate(150px,52px) rotate(10deg);}
  .gd-cols{grid-template-columns:1fr; gap:18px;}
}
.gd-out{height:310px;} @media (max-width:760px){ .gd-out{height:270px;} }
@media (max-width:760px){ .gd-card:nth-child(1), .gd-card:nth-child(5){display:none;} .gd.dealt .gd-card:nth-child(2){transform:translate(-100px,34px) rotate(-7deg);} .gd.dealt .gd-card:nth-child(4){transform:translate(100px,34px) rotate(7deg);} }

/* ---- one spreadsheet, three sheets (2026-10-19): a deep green stage; the sheets stacked like paper, the picked one in front ---- */
.xb{display:grid !important; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) !important; gap:48px !important; align-items:center; margin-top:44px; padding:56px 56px 56px 52px; border-radius:22px; overflow:hidden; isolation:isolate; position:relative;
  background:linear-gradient(150deg,#0c3b2a 0%,#13603f 55%,#1f7a45 100%);}
.xb::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 60% at 85% 10%, rgba(140,230,170,.25), transparent 70%), linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/40px 26px, linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/40px 26px;}
/* the picker */
.xb .bi-list{border:0;}
.xb .bi-item{position:relative; display:grid; grid-template-columns:44px 1fr; column-gap:6px; padding:18px 0 20px; border:0; border-bottom:1px solid rgba(255,255,255,.12); text-align:left; background:none; color:#fff; cursor:pointer;}
.xb .bi-item:last-child{border-bottom:0;}
.xb-n{grid-row:1 / 3; font-family:var(--pc-display,Anton),sans-serif; font-size:24px; line-height:1.1; color:rgba(255,255,255,.3); transition:color .3s;}
.xb .bi-item b{font-size:18px; font-weight:700; color:rgba(255,255,255,.6); transition:color .3s;}
.xb .bi-item p{display:block !important; max-height:none !important; opacity:1 !important; margin:4px 0 0 !important; font-size:14px; line-height:1.5; color:rgba(255,255,255,.5);}
.xb .bi-item.on .xb-n{color:#9ff0c0;} .xb .bi-item.on b{color:#fff;} .xb .bi-item.on p{color:rgba(255,255,255,.8);}
.xb .bi-item:hover b{color:#fff;}
.xb .bi-prog{position:absolute; left:50px; right:0; bottom:-1px; height:2px; background:transparent;}
.xb .bi-prog i{background:#9ff0c0;}
/* the stack */
.xb .sk-xl-pan{background:none !important; border:0; box-shadow:none; padding:0; height:auto;}
.xb .sk-xl-pan::before, .xb .sk-xl-pan::after{display:none;}
.xb .bi-card.sk-xl{background:none; box-shadow:none; border:0; overflow:visible; height:auto;}
.xb .xl-bar, .xb .xl-cols, .xb .xl-tabs{display:none;}
.xb .xl-sheets{position:relative; height:460px; margin-top:40px; overflow:visible;}
.xb .xl-sheet{position:absolute; left:0; right:72px; top:0; height:420px; padding:0; overflow:hidden; border-radius:12px; background:#fff; opacity:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 30px 60px -24px rgba(0,0,0,.55); transform-origin:0 100%;
  transition:transform .6s cubic-bezier(.2,.9,.3,1), opacity .5s, filter .5s;}
.xb .xl-sheet[data-p="0"]{z-index:3; transform:none;}
.xb .xl-sheet[data-p="1"]{z-index:2; transform:translate(36px,-24px) scale(.97); filter:brightness(.93);}
.xb .xl-sheet[data-p="2"]{z-index:1; transform:translate(72px,-48px) scale(.94); filter:brightness(.86);}
.xs-h{display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; background:#1f7a45; color:#fff;}
.xs-h i{width:16px; height:18px; border-radius:3px; background:#fff; opacity:.9;}
.xs-h b{font-size:12.5px;} .xs-h span{margin-left:auto; padding:3px 10px; border-radius:99px; background:rgba(255,255,255,.18); font-size:11.5px; font-weight:700;}
.xs-cols{display:grid; grid-template-columns:repeat(9,1fr); background:#f3f6f2; border-bottom:1px solid #e1e8de;}
.xs-cols span{padding:3px 0; text-align:center; font-size:9.5px; color:#8a9a88; border-right:1px solid #e7ede5;}
.xs-in{padding:12px 14px; height:calc(100% - 60px); overflow:hidden; -webkit-mask-image:linear-gradient(#000 80%,transparent); mask-image:linear-gradient(#000 80%,transparent);}
.xb .xl-hd{background:#e6f2e7;} .xb .xl-side{background:#e6f2e7;} .xb .xl-reg.xl-hd{background:#1f7a45;}
@media (prefers-reduced-motion:reduce){ .xb .xl-sheet{transition:none;} }
@media (max-width:1100px){ .xb{grid-template-columns:1fr !important; padding:36px 28px !important;} .xb .xl-sheets{margin-top:56px;} }
@media (max-width:640px){
  .xb{padding:26px 16px 30px !important; gap:16px !important;}
  .xb .xl-sheets{height:360px; margin-top:44px;} .xb .xl-sheet{right:40px; height:330px;}
  .xb .xl-sheet[data-p="1"]{transform:translate(20px,-18px) scale(.97);} .xb .xl-sheet[data-p="2"]{transform:translate(40px,-36px) scale(.94);}
  .xs-in{zoom:.72;} .xb .bi-item b{font-size:16px;}
}
.xb .sk-xl-pan{height:auto !important; min-height:0 !important; overflow:visible !important;} .xb .bi-card.sk-xl{display:block !important; height:auto !important; position:static !important;} .xb .xl-sheets{height:460px !important; flex:none !important;} @media (max-width:640px){ .xb .xl-sheets{height:360px !important;} }
.xb .bi-card.sk-xl{transform:none !important; top:auto !important; left:auto !important; right:auto !important; width:auto !important;}
@media (max-width:640px){ .xs-h{height:36px;} .xs-h b{font-size:11px; white-space:nowrap;} .xs-h span{font-size:10px; padding:2px 8px; white-space:nowrap;} .xb .xl-sheets{margin-top:28px;} }

/* hero field, natural colours (Mehul 2026-10-20): real grass green, a sandy clay infield, a slightly lighter infield grass,
   chalk white; a soft shadow under the turf so it sits on the page instead of floating */
.skd-grass{fill:#4a9a55;}
.skd-skin{fill-opacity:1;}
.skd-glow path{stroke:#ffffff; stroke-width:5; stroke-opacity:.18;}
.skd-lines *{stroke:#fff; stroke-opacity:.92; stroke-width:2;}
.skd-lines .skd-f{stroke:#fff; stroke-opacity:.35;}
.skd-b rect, .skd-b path{fill:#fff; filter:drop-shadow(0 1px 1.5px rgba(30,40,20,.45));}
.skd-pos .if circle{fill:#5b82f5;} .skd-pos .of circle{fill:#fff;} .skd-pos .pc circle{fill:#ffcf5a;}
.skd-pos .of circle{stroke:#2f7a3c;}
.skd-dot{fill:#fff;}
.skd-svg-shadow, .skd svg{filter:drop-shadow(0 30px 40px rgba(30,70,40,.18));}

/* ---- the late scratch, third pass (Mehul 2026-10-20: match the site, no pills or dotted timeline): one white frame like the
   check section's, two columns split by a hairline, a plain header with a live status line in each, and one thin progress
   rule along the bottom with the three beats as text ---- */
.skb{background:#fff;}
.skb-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:44px; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px #e6ecef;}
.skb-grid::before, .skb-grid::after{display:none;}
.skb-card{position:relative; padding:28px 36px 34px; background:none !important;}
.skb-hand{background:#fbf9f4 !important; border-right:1px solid #e6ecef;}
.skb-hd{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px;}
.skb-hd > b{font-size:15px; font-weight:600; color:var(--pc-ink);}
.skb-st{position:relative; display:grid; text-align:right; font-size:13px; color:#62707c;}
.skb-st i{grid-area:1/1; font-style:normal; opacity:0; transform:translateY(4px); transition:opacity .3s, transform .3s;}
.skb-grid:not(.p1) .skb-st .s0, .skb-grid.p1:not(.p2) .skb-st .s1, .skb-grid.p2:not(.p3) .skb-st .s2, .skb-grid.p3 .skb-st .s3{opacity:1; transform:none;}
.skb-hand .skb-grid.p3 .s3, .skb-grid.p3 .skb-hand .s3{color:#b42318;}
.skb-grid.p3 .skb-clean .s3{color:#1f7a45;}
/* the paper: flat, ruled, square-ish, no clip, no tilt */
.skb-hand .skb-paper{transform:none; border-radius:6px; padding:22px 22px 26px; min-height:400px; background:#fffdf8; box-shadow:0 0 0 1px #ebe3d0, 0 16px 30px -22px rgba(70,50,10,.35);}
.skb-hand .skb-paper::before{left:150px;}
/* the app card: the same white card the rest of the page uses */
.skb-clean .skb-app{min-height:400px; border-radius:10px; box-shadow:0 0 0 1px #e3eaee, 0 16px 30px -22px rgba(13,27,42,.3);}
.skb-mid, .skb-clip, .skb-lab{display:none !important;}
/* the bottom rule */
.skb-foot{grid-column:1 / -1; position:relative; display:grid; grid-template-columns:repeat(3,1fr); padding:16px 36px 18px; border-top:1px solid #e6ecef; font-size:13px; color:#62707c;}
.skb-foot span{transition:color .3s;} .skb-foot .f2{text-align:center;} .skb-foot .f3{text-align:right;}
.skb-grid.p1 .f1, .skb-grid.p2 .f2, .skb-grid.p3 .f3{color:var(--pc-ink); font-weight:600;}
.skb-foot i{position:absolute; left:0; right:0; top:-1px; height:2px;}
.skb-foot i b{display:block; height:100%; width:0; background:#007a76; transition:width 1.4s ease;}
.skb-grid.p1 .skb-foot i b{width:20%;} .skb-grid.p2 .skb-foot i b{width:55%;} .skb-grid.p3 .skb-foot i b{width:100%;}
@media (max-width:960px){
  .skb-grid{grid-template-columns:1fr;} .skb-hand{border-right:0; border-bottom:1px solid #e6ecef;}
  .skb-card{padding:22px 18px 26px;} .skb-hand .skb-paper, .skb-clean .skb-app{min-height:0;}
  .skb-foot{padding:14px 18px; font-size:12px;}
}
@media (max-width:560px){ .skb-hand .skb-paper::before{left:106px;} .skb-st{font-size:12px;} }
.skb-st i{display:block; width:auto; height:auto; padding:0; margin:0; border:0; border-radius:0; background:none !important; box-shadow:none; white-space:nowrap;}
.skb-grid.p2 .f1, .skb-grid.p3 .f1, .skb-grid.p3 .f2{color:#62707c; font-weight:400;}
.skb-hand .hc .n{background:#fffdf8;}
.skb-foot i{display:block; background:none;}
.skb-t{font-style:normal;} @media (max-width:560px){ .skb-t{display:none;} }

/* ---- late scratch background (Mehul 2026-10-20): a band of fine hairline waves, teal into violet, drifting very slowly
   behind the frame, with a few soft lights travelling along them; faded at every edge so it frames the work, never competes ---- */
.skb{position:relative; overflow:hidden; isolation:isolate; background:#fbfcfd;}
.skb-bg{position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-mask-image:radial-gradient(75% 60% at 50% 62%, #000 30%, transparent 78%); mask-image:radial-gradient(75% 60% at 50% 62%, #000 30%, transparent 78%);}
.skb-bg::before{content:""; position:absolute; inset:0; background:radial-gradient(40% 40% at 25% 70%, rgba(95,212,207,.18), transparent 70%), radial-gradient(40% 45% at 80% 45%, rgba(110,88,240,.12), transparent 70%);}
.skb-bg svg{position:absolute; inset:0; width:100%; height:100%;}
.skb-w path{fill:none; stroke:url(#skb-wl); stroke-width:1; stroke-opacity:.32; vector-effect:non-scaling-stroke;}
.skb-p path{fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-dasharray:60 2400; stroke-dashoffset:2460; opacity:.9; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 4px rgba(95,212,207,.9));}
@media (prefers-reduced-motion:no-preference){
  .skb-w, .skb-p{animation:skb-drift 60s linear infinite;}
  .skb-p path{animation:skb-pulse 9s ease-in-out infinite; animation-delay:calc(var(--k) * -.9s);}
}
@keyframes skb-drift{from{transform:translateX(0);} to{transform:translateX(900px);}}
@keyframes skb-pulse{0%{stroke-dashoffset:2460;} 100%{stroke-dashoffset:0;}}
.skb .pc-wrap{position:relative;}
.skb-grid{box-shadow:0 0 0 1px #e6ecef, 0 40px 80px -40px rgba(13,40,60,.25);}
@media (max-width:760px){ .skb-bg{-webkit-mask-image:radial-gradient(120% 50% at 50% 55%, #000 25%, transparent 75%); mask-image:radial-gradient(120% 50% at 50% 55%, #000 25%, transparent 75%);} }
.skb{padding-bottom:140px;}
.skb-bg{top:120px; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);}
.skb-w path{stroke-opacity:.5;}
@media (max-width:760px){ .skb{padding-bottom:70px;} .skb-w path{stroke-opacity:.28;} .skb-p{display:none;} }
.skb-bg{top:210px;} @media (max-width:760px){ .skb-bg{top:180px;} }

/* ---- the whole camp, start to finish, third pass (Mehul 2026-10-20: sharper, our frame): one white frame split into three
   columns by hairlines, the same frame as the late-scratch and check sections. No coloured tiles; each picture sits on a
   faint dot field; small corners on every card; the text sits inside the frame under a hairline ---- */
.skj{gap:0; margin-top:44px; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px #e6ecef;}
.skj-stop{border-right:1px solid #e6ecef;}
.skj-stop:last-child{border-right:0;}
.skj-art, .j1 .skj-art, .j2 .skj-art, .j3 .skj-art{height:330px; border-radius:0; background:#fbfcfd; box-shadow:none;}
.skj-art::before{opacity:1; background:radial-gradient(rgba(13,27,42,.09) 1px, transparent 1.2px) 0 0/16px 16px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent); mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);}
.j2 .skj-art::before{background-image:radial-gradient(rgba(13,27,42,.09) 1px, transparent 1.2px);}
.skj-t{margin:0; padding:22px 28px 26px; border-left:0; border-top:1px solid #e6ecef;}
.skj-t::before{left:0; top:22px; height:24px;}
/* 1: roster: the source chip as a plain line, sharp card */
.jr-src{border-radius:6px; background:#fff; color:var(--pc-ink); box-shadow:0 0 0 1px #e3eaee;}
.jr-src small{color:#00726f;} .jr-ico{border-radius:5px;}
.jr-card{border-radius:8px; box-shadow:0 0 0 1px #e3eaee, 0 14px 28px -20px rgba(13,27,42,.4);}
.jr-stats span{border-radius:4px;}
/* 2: the printer: a light slot, the paper with square corners */
.j-slot{background:#d9e0e5; box-shadow:inset 0 2px 3px rgba(13,27,42,.25); border-radius:4px;}
.j-paper{border-radius:0 0 3px 3px; box-shadow:0 0 0 1px #e3eaee, 0 16px 26px -18px rgba(13,27,42,.45);}
.j-paper.back{background:#f1f4f6; box-shadow:0 0 0 1px #e3eaee;}
/* 3: the workbook: square window */
.jx{border-radius:6px; box-shadow:0 0 0 1px #dfe8dc, 0 14px 28px -20px rgba(20,90,40,.4);}
.jx-tabs span{border-radius:2px;}
@media (max-width:900px){ .skj{grid-template-columns:1fr;} .skj-stop{border-right:0; border-bottom:1px solid #e6ecef;} .skj-stop:last-child{border-bottom:0;} .skj-art{height:300px;} }
/* captions, Stripe style (Mehul 2026-10-20): the stage in small muted type, then one sentence that opens in dark bold and
   carries on in grey; no rule lines, no teal marks. The pictures sit on a clean surface with a soft light, no dots. */
.skj-t{padding:24px 30px 30px; border-top:1px solid #eef2f4;}
.skj-t::before{display:none;}
.skj-t .skj-n{display:block; margin:0 0 8px; font-size:12px; font-weight:500; letter-spacing:.02em; color:#62707c;}
.skj-t p{margin:0; font-size:16px; line-height:1.5; color:#62707c;}
.skj-t p b{font-weight:600; color:var(--pc-ink);}
.skj-art::before{display:none;}
.j1 .skj-art{background:radial-gradient(70% 70% at 50% 45%, #ffffff 0%, #f1f8f7 100%);}
.j2 .skj-art{background:radial-gradient(70% 70% at 50% 45%, #ffffff 0%, #f2f5f8 100%);}
.j3 .skj-art{background:radial-gradient(70% 70% at 50% 45%, #ffffff 0%, #f1f7f1 100%);}

/* ---- four steps, fourth pass (Mehul 2026-10-20: the scoreboard read as AI, the photo did not blend):
   Stripe's product tabs: four plain columns, a hairline track on top that fills teal under the live step, a small step
   number and the title; the stage is the same 16px frame, the photo sunk into navy so only the lights and the
   field's glow come through ---- */
.sk-list{grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:24px; padding:0; border-radius:0; background:none !important; box-shadow:none !important;}
.skc-head{display:none !important;}
.sk-item{align-items:flex-start !important; text-align:left !important; gap:6px !important; padding:18px 0 6px !important; border:0 !important; border-top:2px solid #e3e9ec !important; background:none !important; cursor:pointer;}
.sk-item:hover{background:none !important;}
.sk-n{display:block !important; width:auto !important; height:auto !important; background:none !important; box-shadow:none !important; transform:none !important;
  font-family:inherit !important; font-size:13px !important; font-weight:600; letter-spacing:.02em; color:#62707c !important;}
.sk-item.on .sk-n, .sk-item:has(~ .sk-item.on) .sk-n{color:#00726f !important;}
.sk-it b{font-size:17px !important; font-weight:600 !important; letter-spacing:-.01em !important; text-transform:none !important; color:#62707c !important;}
.sk-item.on .sk-it b, .sk-item:hover .sk-it b{color:var(--pc-ink) !important;}
.sk-prog{left:0 !important; right:0 !important; top:-2px !important; bottom:auto !important; height:2px !important; border-radius:0 !important; background:transparent !important;}
.sk-prog i{background:#007a76 !important;}
.sk-item:has(~ .sk-item.on) .sk-prog i{animation:none !important; width:100% !important;}
.sk-item:focus-visible{outline:2px solid #007a76; outline-offset:4px;}
.skc-cap{margin:18px 0 26px; max-width:none; text-align:left; font-size:16px; color:#62707c;}
/* the stage */
.sk-stage{border-radius:16px; background:#06111c;}
.st-photo{filter:grayscale(1) contrast(1.15) brightness(.8) blur(1.5px); object-position:50% 0%; transform:scale(1.04);}
.st-tint{background:linear-gradient(180deg, rgba(6,17,28,.15) 0%, rgba(6,17,28,.55) 45%, #06111c 88%); mix-blend-mode:normal;}
.st-tint::after{background:radial-gradient(60% 55% at 50% 30%, rgba(0,122,118,.28), transparent 70%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(6,17,28,.85) 100%);}
.st-tint::before{content:""; position:absolute; inset:0; background:#0d3a44; mix-blend-mode:color; opacity:.8;}
@media (max-width:960px){ .sk-list{gap:14px;} .sk-it b{font-size:14px !important;} }
@media (max-width:560px){ .sk-list{grid-template-columns:repeat(2,minmax(0,1fr)) !important; row-gap:4px;} .sk-it b{font-size:14px !important;} .sk-item{padding:14px 0 6px !important;} }
.sk-item.on .sk-n, .sk-item:has(~ .sk-item.on) .sk-n, .sk-item .sk-n{background:none !important; box-shadow:none !important; text-shadow:none !important; transform:none !important;} .st-photo{filter:grayscale(1) contrast(1.2) brightness(.85) blur(.6px);}

/* ---- four steps, fifth pass: a single dark stage. Left: the steps as a rail, the live one opens with its line and a thin
   progress fill. Right: the Lineup Builder. Behind: a ballfield in perspective hairlines and a soft teal light ---- */
.sx{position:relative; display:grid !important; grid-template-columns:330px minmax(0,1fr) !important; gap:0 !important; align-items:stretch !important;
  margin-top:40px; border-radius:16px; overflow:hidden; isolation:isolate; background:radial-gradient(60% 80% at 70% 0%, #123b47 0%, #0a1c2a 55%, #07121d 100%);
  box-shadow:0 30px 60px -36px rgba(6,20,30,.6);}
.sx-art{position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%); mask-image:linear-gradient(180deg,transparent 0%,#000 30%);}
.sx-fan path, .sx-cross path{fill:none; stroke:#5fd4cf; stroke-opacity:.11; stroke-width:1; vector-effect:non-scaling-stroke;}
.sx-dia, .sx-arc{fill:none; stroke:#9fe3df; stroke-opacity:.45; stroke-width:1.4; vector-effect:non-scaling-stroke;}
.sx-dia{fill:rgba(95,212,207,.05);}
.sx-base{fill:#e6faf8; opacity:.75;} .sx-home{fill:#e6faf8; opacity:.85;}
@media (prefers-reduced-motion:no-preference){ .sx-arc{stroke-dasharray:6 10; animation:sx-run 30s linear infinite;} }
@keyframes sx-run{to{stroke-dashoffset:-320;}}
/* the rail */
.sx .sk-list{display:flex !important; flex-direction:column; justify-content:center; gap:0 !important; padding:40px 0 40px 40px !important; grid-template-columns:none !important;}
.sx .sk-item{position:relative; display:grid !important; grid-template-columns:34px 1fr; column-gap:14px; align-items:start !important; padding:16px 18px 16px 0 !important;
  border:0 !important; border-top:0 !important; text-align:left !important;}
.sx .sk-item::before{content:""; position:absolute; left:16px; top:0; bottom:0; width:1px; background:rgba(255,255,255,.12);}
.sx .sk-item:first-of-type::before{top:30px;} .sx .sk-item:last-of-type::before{bottom:calc(100% - 30px);}
.sx .sk-n{position:relative; z-index:1; display:grid !important; place-items:center; width:32px !important; height:32px !important; border-radius:50% !important;
  background:#0b1f2c !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) !important; font-size:12px !important; color:rgba(255,255,255,.55) !important;}
.sx .sk-item.on .sk-n{background:#007a76 !important; box-shadow:0 0 0 5px rgba(0,122,118,.25) !important; color:#fff !important;}
.sx .sk-item:has(~ .sk-item.on) .sk-n{background:#0b1f2c !important; box-shadow:inset 0 0 0 1px #5fd4cf !important; color:#5fd4cf !important;}
.sx .sk-it{padding-top:5px;}
.sx .sk-it b{font-size:16px !important; font-weight:600 !important; color:rgba(255,255,255,.55) !important;}
.sx .sk-item.on .sk-it b, .sx .sk-item:hover .sk-it b{color:#fff !important;}
.sx .sk-it p{display:block !important; max-height:0; overflow:hidden; opacity:0; margin:0 !important; font-size:14px !important; line-height:1.55; color:rgba(255,255,255,.65) !important; transition:max-height .45s, opacity .35s, margin .45s;}
.sx .sk-item.on .sk-it p{max-height:90px; opacity:1; margin-top:6px !important;}
.sx .sk-prog{position:relative !important; display:block !important; top:auto !important; left:auto !important; right:auto !important; height:2px !important; margin-top:12px !important; background:rgba(255,255,255,.1) !important; border-radius:2px !important; opacity:0;}
.sx .sk-item.on .sk-prog{opacity:1;}
.sx .sk-prog i{background:#5fd4cf !important;}
.sx .sk-item:focus-visible{outline:2px solid #5fd4cf; outline-offset:2px;}
.skc-cap{display:none !important;}
/* the card side */
.sx .sk-stage{height:620px; background:none !important; border-radius:0;}
.sx .st-photo, .sx .st-tint, .sx .st-scene{display:none !important;}
.sx .sk-front{left:auto; right:44px; width:calc(100% - 44px); max-width:820px; top:50%; height:540px;}
@media (max-width:1100px){
  .sx{grid-template-columns:1fr !important;}
  .sx .sk-list{padding:30px 24px 0 !important;}
  .sx .sk-stage{height:600px;} .sx .sk-front{right:auto; left:50%; width:calc(100% - 48px);}
}
@media (max-width:560px){ .sx .sk-list{padding:22px 14px 0 !important;} .sx .sk-front{width:calc(100% - 24px); height:600px;} .sx .sk-stage{height:640px;} }
.sx .sk-front{transform:translateY(-50%) !important; left:28px !important; right:44px !important; width:auto !important; max-width:none !important;}
.sx .sk-list{background:none !important; box-shadow:none !important;}
.sx .sk-stage{overflow:visible !important;}
@media (max-width:1100px){ .sx .sk-front{left:24px !important; right:24px !important;} }
@media (max-width:560px){ .sx .sk-front{left:12px !important; right:12px !important;} }

/* stage background, sixth pass (Mehul 2026-10-20: finer, closer, different): concentric hairline rings 9px apart rising from
   below the rail, like a ballpark's tiers from above; a soft beam of light sweeps slowly across them */
.sx-fan, .sx-cross, .sx-dia, .sx-arc, .sx-base, .sx-home{display:none;}
.sx-art{-webkit-mask-image:radial-gradient(120% 110% at 20% 100%, #000 35%, transparent 85%); mask-image:radial-gradient(120% 110% at 20% 100%, #000 35%, transparent 85%);}
.sx-rings circle{fill:none; stroke:#5fd4cf; stroke-opacity:.1; stroke-width:1; vector-effect:non-scaling-stroke;}
.sx-lit circle{fill:none; stroke:#8ff0ea; stroke-opacity:.55; stroke-width:1; vector-effect:non-scaling-stroke;}
.sx-beam{transform:rotate(-55deg);}
@media (prefers-reduced-motion:no-preference){ .sx-beam{animation:sx-sweep 14s ease-in-out infinite alternate;} }
@keyframes sx-sweep{from{transform:rotate(-58deg);} to{transform:rotate(58deg);}}
.sx-rings circle{stroke-opacity:.17;}
.sx-lit circle{stroke-opacity:.8;}
.sx-art{-webkit-mask-image:radial-gradient(140% 130% at 20% 100%, #000 45%, transparent 92%); mask-image:radial-gradient(140% 130% at 20% 100%, #000 45%, transparent 92%);}

/* ---- four steps, seventh pass (Mehul 2026-10-20: a Stripe-style silk background in our colours; lighter numbers):
   the stage is a soft colour field (amber, mint, brand teal, deep blue) with two ribbons of fine silk lines folding across
   it, drifting very slowly; the steps sit on a frosted white panel with quiet numbers and a vertical progress track ---- */
.sx{background:linear-gradient(125deg,#fff4dc 0%,#bfeee4 22%,#2fb3a6 48%,#0d7f80 68%,#103e63 100%);}
.sx-rings, .sx-lit, .sx-beam{display:none;}
.sx-art{-webkit-mask-image:none; mask-image:none;}
.sx-silk path{fill:none; stroke:url(#sx-g1); stroke-width:1.1; vector-effect:non-scaling-stroke;}
.sx-silk.b path{stroke:url(#sx-g2);}
@media (prefers-reduced-motion:no-preference){
  .sx-silk.a{animation:sx-silk 26s ease-in-out infinite alternate;}
  .sx-silk.b{animation:sx-silk 32s ease-in-out infinite alternate-reverse;}
  .sx-fields{animation:sx-fields 30s ease-in-out infinite alternate;}
}
@keyframes sx-silk{from{transform:translate(-40px,0) skewY(-1deg);} to{transform:translate(40px,-14px) skewY(1.2deg);}}
@keyframes sx-fields{from{transform:translate(0,0);} to{transform:translate(-60px,20px);}}
/* the rail: frosted panel, dark text, quiet numbers */
.sx .sk-list{align-self:center; margin:36px 0 36px 36px !important; padding:10px 22px !important; border-radius:12px;
  background:rgba(255,255,255,.78) !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 20px 40px -24px rgba(6,40,50,.45) !important;}
.sx .sk-item{grid-template-columns:28px 1fr; padding:16px 0 16px 16px !important;}
.sx .sk-item::before{left:0 !important; top:12px !important; bottom:12px !important; width:2px; background:#e3e9ec; border-radius:2px;}
.sx .sk-item:first-of-type::before, .sx .sk-item:last-of-type::before{top:12px !important; bottom:12px !important;}
.sx .sk-item.on::before, .sx .sk-item:has(~ .sk-item.on)::before{background:#007a76;}
.sx .sk-n, .sx .sk-item.on .sk-n, .sx .sk-item:has(~ .sk-item.on) .sk-n{display:block !important; width:auto !important; height:auto !important; border-radius:0 !important;
  background:none !important; box-shadow:none !important; padding-top:6px; font-size:12.5px !important; font-weight:600; color:#62707c !important;}
.sx .sk-item.on .sk-n{color:#00726f !important;}
.sx .sk-item:has(~ .sk-item.on) .sk-n{color:#5b8f8c !important;}
.sx .sk-it b{color:#62707c !important;}
.sx .sk-item.on .sk-it b, .sx .sk-item:hover .sk-it b{color:var(--pc-ink) !important;}
.sx .sk-it p{color:#5b6b78 !important;}
.sx .sk-prog{background:#e8eef1 !important;} .sx .sk-prog i{background:#007a76 !important;}
@media (max-width:1100px){ .sx .sk-list{margin:24px 24px 0 !important;} }
@media (max-width:560px){ .sx .sk-list{margin:14px 12px 0 !important; padding:6px 14px !important;} }

/* ---- four rules: the tiles in the same silk family as the steps stage (Mehul 2026-10-20), each its own blend of our colours:
   1 deep navy into teal, 2 cream into mint and teal, 3 warm sand into amber, 4 fresh grass greens; fine white silk lines drift
   across each; the white cards sit on top ---- */
.skw-art{isolation:isolate;}
.sw-silk{position:absolute; inset:-10% -5%; width:110%; height:120%; z-index:-1; pointer-events:none;
  -webkit-mask-image:radial-gradient(90% 80% at 60% 40%,#000 30%,transparent 85%); mask-image:radial-gradient(90% 80% at 60% 40%,#000 30%,transparent 85%);}
.sw-silk path{fill:none; stroke:#fff; stroke-opacity:.38; stroke-width:1; vector-effect:non-scaling-stroke;}
@media (prefers-reduced-motion:no-preference){ .sw-silk{animation:sw-drift 24s ease-in-out infinite alternate;} .t2 .sw-silk{animation-duration:30s;} .t3 .sw-silk{animation-duration:27s;} .t4 .sw-silk{animation-duration:33s;} }
@keyframes sw-drift{from{transform:translate(-24px,0) skewY(-1deg);} to{transform:translate(24px,-10px) skewY(1deg);}}
.t1 .skw-art{background:radial-gradient(70% 90% at 90% 0%, #1a8a86 0%, transparent 60%), radial-gradient(60% 80% at 0% 100%, #1d3f7a 0%, transparent 60%), #0b1a2a !important;}
.t1 .skw-art::before{display:none;}
.t1 .sw-silk path{stroke-opacity:.22;}
.t2 .skw-art{background:linear-gradient(130deg,#fff3dc 0%,#c8efe6 38%,#43b8ab 72%,#137a7c 100%) !important;}
.t2::before{display:none !important;}
.t3 .skw-art{background:linear-gradient(135deg,#fff7ea 0%,#ffe0a8 40%,#f7b267 75%,#e98a52 100%) !important; box-shadow:none !important;}
.t3 .skw-art::before{display:none !important;}
.t3 .bp{background:#fffdf8 !important; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 20px 40px -22px rgba(90,50,10,.45) !important; padding:14px 16px !important;}
.t4 .skw-art{background:linear-gradient(160deg,#e9f9ec 0%,#a6e2b4 28%,#3fae72 58%,#16714f 100%) !important;}
.sc{box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 24px 44px -24px rgba(13,40,60,.45);}
.hb i{background:#a8dcd8;} .hb.pk i{background:#007a76;} .hb.z i{background:#e4e8ec;}

/* ---- four rules, the backgrounds rethought (Mehul 2026-10-20: no more lines): each tile gets a different material.
   1 a slow aurora of soft colour on navy; 2 two glossy orbs drifting in a mint-to-teal light; 3 an oversized baseball, stitches
   and all, turning slowly in the corner of a warm amber tile; 4 real turf: fine grain and a stadium light pool on green ---- */
.sw-silk{display:none !important;}
.sw-mesh, .sw-orbs{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;}
.sw-mesh i{position:absolute; border-radius:50%; filter:blur(50px); opacity:.75;}
.sw-mesh i:nth-child(1){width:60%; height:90%; left:-10%; top:20%; background:#1d4f9a;}
.sw-mesh i:nth-child(2){width:55%; height:80%; right:-8%; top:-30%; background:#14a39b;}
.sw-mesh i:nth-child(3){width:40%; height:60%; left:40%; bottom:-35%; background:#6a5be8; opacity:.45;}
@media (prefers-reduced-motion:no-preference){
  .sw-mesh i:nth-child(1){animation:sw-a 18s ease-in-out infinite alternate;} .sw-mesh i:nth-child(2){animation:sw-b 22s ease-in-out infinite alternate;} .sw-mesh i:nth-child(3){animation:sw-a 26s ease-in-out infinite alternate-reverse;}
}
@keyframes sw-a{to{transform:translate(18%,-12%) scale(1.15);}} @keyframes sw-b{to{transform:translate(-20%,16%) scale(.9);}}
.t2 .skw-art{background:linear-gradient(150deg,#f3fbf9 0%,#d7f2ec 45%,#9fdcd3 100%) !important;}
.sw-orbs i{position:absolute; border-radius:50%;}
.sw-orbs i:nth-child(1){width:300px; height:300px; right:-90px; top:-110px; background:radial-gradient(circle at 32% 30%, #ffffff 0%, #bfeee6 18%, #2fb3a6 60%, #0d6f70 100%); box-shadow:inset -20px -30px 60px rgba(0,60,58,.35), 0 30px 60px -20px rgba(0,90,86,.4);}
.sw-orbs i:nth-child(2){width:150px; height:150px; left:-40px; bottom:-50px; background:radial-gradient(circle at 32% 30%, #ffffff 0%, #fff1d2 22%, #f2c66e 65%, #c88a2a 100%); box-shadow:inset -10px -16px 30px rgba(120,70,0,.3);}
@media (prefers-reduced-motion:no-preference){ .sw-orbs i:nth-child(1){animation:sw-f 9s ease-in-out infinite alternate;} .sw-orbs i:nth-child(2){animation:sw-f 11s ease-in-out infinite alternate-reverse;} }
@keyframes sw-f{to{transform:translateY(16px) scale(1.03);}}
.t3 .skw-art{background:linear-gradient(135deg,#fff3dc 0%,#ffd590 55%,#f3a65a 100%) !important;}
.sw-ball{position:absolute; z-index:-1; width:300px; height:300px; right:-90px; bottom:-110px; filter:drop-shadow(0 24px 30px rgba(120,60,0,.35));}
.sw-seam{fill:none; stroke:#c0392b; stroke-width:2;} .sw-st{fill:none; stroke:#c0392b; stroke-width:1.8; stroke-linecap:round;}
@media (prefers-reduced-motion:no-preference){ .sw-ball{animation:sw-spin 40s linear infinite;} }
@keyframes sw-spin{to{transform:rotate(360deg);}}
.t4 .skw-art{background:linear-gradient(170deg,#3a9e5f 0%,#23804b 55%,#155e39 100%) !important;}
.sw-grain{position:absolute; inset:0; z-index:-1; width:100%; height:100%; opacity:.16; mix-blend-mode:overlay;}
.sw-pool{position:absolute; z-index:-1; left:50%; top:-30%; width:120%; height:120%; transform:translateX(-50%); background:radial-gradient(50% 45% at 50% 40%, rgba(255,255,235,.38), transparent 70%);}
.t4 .bf-d path{fill:rgba(255,255,255,.08); stroke:rgba(255,255,255,.75);} .t4 .bf-d .bf-l{stroke:rgba(255,255,255,.4);}
.t4 .bf-s, .t4 .bf-s b{color:#fff !important;} .t4 .bf-s{color:rgba(255,255,255,.85) !important;}

/* ---- four rules, final look (Mehul 2026-10-20: Stripe's own way, our theme): every tile is the same quiet light panel with a
   hairline border; the pictures are white cards; tile 2 is Stripe's usage chart with a card overlapping it ---- */
.sw-mesh, .sw-orbs, .sw-ball, .sw-grain, .sw-pool{display:none !important;}
.skw-art, .t1 .skw-art, .t2 .skw-art, .t3 .skw-art, .t4 .skw-art{background:#f6f9fb !important; box-shadow:inset 0 0 0 1px #e6ecef !important;}
.skw-art::before, .t1 .skw-art::before, .t3 .skw-art::before{display:none !important;}
/* 1: the roster in the light theme */
.t1 .bx{background:#fff !important; box-shadow:0 0 0 1px #e3eaee, 0 18px 36px -24px rgba(13,27,42,.35) !important;}
.t1 .bx-h{border-bottom-color:#eef2f4;} .t1 .bx-h b{color:var(--pc-ink);} .t1 .bx-h span{color:#7a8a96;} .t1 .bx-h em{color:#00726f;}
.t1 .bx-r{border-bottom-color:#f1f4f6;} .t1 .bx-r b{color:var(--pc-ink);} .t1 .bx-av{background:#eef4f6; color:#41505d;} .t1 .bx-r small{color:#62707c;}
/* 2: the chart, as Stripe draws it */
.t2 .skw-art{display:block; padding:28px 28px 0 !important; min-height:340px; overflow:hidden;}
.sc2{position:relative; margin-left:22%; padding:22px 24px 0; border-radius:10px 10px 0 0; background:#fff; box-shadow:0 0 0 1px #e3eaee;}
.sc2 small{display:block; font-size:14px; color:#62707c;}
.sc2 > b{display:block; margin-top:4px; font-size:21px; font-weight:600; letter-spacing:-.01em; color:var(--pc-ink); font-variant-numeric:tabular-nums;}
.sc2-bars{display:flex; align-items:flex-end; gap:4px; height:220px; margin-top:22px;}
.sc2-bars i{flex:1; height:0; background:#14a39b; transition:height .9s cubic-bezier(.3,1.2,.5,1) calc(var(--i) * .02s);}
.skw-grid.in .sc2-bars i{height:calc(var(--h) / 6 * 100%);}
.sc2-card{position:absolute; left:28px; top:150px; width:300px; padding:18px 20px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.05), 0 24px 44px -18px rgba(13,40,60,.35);}
.sc2-ch{display:flex; align-items:center; gap:12px;}
.sc2-ic{display:grid; place-items:center; width:36px; height:36px; border-radius:8px; background:linear-gradient(135deg,#14a39b,#007a76);}
.sc2-ic svg{width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round;}
.sc2-ch b{display:block; font-size:16px; font-weight:600; color:var(--pc-ink);} .sc2-ch small{font-size:13px; color:#62707c;}
.sc2-cb{display:grid; grid-template-columns:1fr auto; gap:14px; align-items:end; margin-top:16px;}
.sc2-cb b{display:block; font-size:13.5px; font-weight:600; color:var(--pc-ink);} .sc2-cb small{font-size:12.5px; line-height:1.4; color:#62707c;}
.sc2-m{display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
.sc2-m em{display:inline-flex; align-items:center; gap:5px; font-style:normal; font-size:13px; font-weight:600; color:var(--pc-ink);}
.sc2-m em svg{width:14px; height:14px; fill:none; stroke:#007a76; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.sc2-m i{display:block; width:110px; height:8px; border-radius:2px; background:linear-gradient(90deg,#007a76,#14a39b);}
/* 3: the scorebook card, plain */
.t3 .bp{background:#fff !important; box-shadow:0 0 0 1px #e3eaee, 0 18px 36px -24px rgba(13,27,42,.35) !important;}
.t3 .skw-art::before{display:none !important;}
/* 4: the field drawn on the light panel */
.t4 .bf-d path{fill:#eef6f3; stroke:#b9d6cf;} .t4 .bf-d .bf-l{stroke:#d3e3df;}
.t4 .bf-s{color:#62707c !important;} .t4 .bf-s b{color:var(--pc-ink) !important;}
.bf-p{box-shadow:0 0 0 1px #e3eaee, 0 8px 16px -10px rgba(13,27,42,.35);}
@media (max-width:760px){
  .sc2{margin-left:0;} .sc2-card{position:relative; left:auto; top:auto; width:auto; margin:-60px 10px 18px;} .sc2-bars{height:160px; gap:2px;}
  .t2 .skw-art{padding:18px 14px 0 !important;}
  .t4 .bf-s{color:#62707c !important;} .t4 .bf-s b{color:var(--pc-ink) !important;}
}
.sc2-bars{justify-content:space-between; gap:0; height:190px;}
.sc2-bars i{flex:none; width:8px; background:#1aa69e;}
.sc2-card{top:170px; width:280px;}
@media (max-width:760px){ .sc2-bars i{width:6px;} }
@media (min-width:1101px){ .t1{grid-column:span 5;} .t2{grid-column:span 7;} }
.t1 .bx-r small{display:none;}
.sc2{margin-left:30%;}
.sc2-bars{height:200px;}
.sc2-bars i{width:7px;}
.sc2-card{top:120px; width:300px;}
.sc2-cb{grid-template-columns:1fr; gap:12px;}
.sc2-m{flex-direction:row; align-items:center; justify-content:space-between; width:100%;}
.sc2-m i{width:120px;}
.sc2-bars{display:flex; justify-content:space-between !important; gap:0 !important;}
.sc2-bars i{flex:0 0 8px !important; width:8px !important;}
@media (max-width:760px){
  .t2 .skw-art{padding:18px 14px 18px !important; min-height:0;}
  .sc2{margin-left:0; border-radius:10px;} .sc2-bars{height:150px; padding-bottom:16px;}
  .sc2-bars i{flex:0 0 7px !important; width:7px !important;}
  .sc2-card{position:relative; left:auto; top:auto; width:auto; margin:12px 0 0;}
}

/* ---- four rules: Stripe's corner wash (Mehul 2026-10-20). Each light panel stays white-ish; a soft sweep of our colours
   rises from one corner only, at a different corner per tile, and breathes very slowly. No full backgrounds. ---- */
.skw-art{position:relative; overflow:hidden;}
.skw-art::after{content:""; position:absolute; z-index:-1; width:130%; height:150%; pointer-events:none; filter:blur(6px);
  transition:opacity .6s;}
.t1 .skw-art::after{left:-40%; bottom:-85%; border-radius:50%;
  background:conic-gradient(from 200deg at 50% 50%, #ffd27a, #f3a65a, #14a39b, #0d6f86, #ffd27a); opacity:.55;
  -webkit-mask-image:radial-gradient(closest-side, #000 55%, transparent); mask-image:radial-gradient(closest-side, #000 55%, transparent);}
.t2 .skw-art::after{right:-55%; top:-95%; border-radius:50%;
  background:conic-gradient(from 20deg at 50% 50%, #5fd4cf, #14a39b, #6e8cf0, #b9a6f7, #5fd4cf); opacity:.5;
  -webkit-mask-image:radial-gradient(closest-side, #000 55%, transparent); mask-image:radial-gradient(closest-side, #000 55%, transparent);}
.t3 .skw-art::after{right:-60%; bottom:-95%; border-radius:50%;
  background:conic-gradient(from 120deg at 50% 50%, #ffe0a8, #f7b267, #e98a52, #f2c66e, #ffe0a8); opacity:.6;
  -webkit-mask-image:radial-gradient(closest-side, #000 55%, transparent); mask-image:radial-gradient(closest-side, #000 55%, transparent);}
.t4 .skw-art::after{left:-50%; top:-100%; border-radius:50%;
  background:conic-gradient(from 300deg at 50% 50%, #a6e2b4, #3fae72, #14a39b, #d6f3dc, #a6e2b4); opacity:.55;
  -webkit-mask-image:radial-gradient(closest-side, #000 55%, transparent); mask-image:radial-gradient(closest-side, #000 55%, transparent);}
@media (prefers-reduced-motion:no-preference){
  .skw-art::after{animation:sw-wash 18s ease-in-out infinite alternate;}
  .t2 .skw-art::after{animation-duration:22s;} .t3 .skw-art::after{animation-duration:20s;} .t4 .skw-art::after{animation-duration:24s;}
}
@keyframes sw-wash{from{transform:rotate(0deg) scale(1);} to{transform:rotate(28deg) scale(1.08);}}
.skw-art > *{position:relative;}
.sc2-card{position:absolute;}
@media (max-width:760px){ .sc2-card{position:relative;} }
.skw-art > .bf-s{position:absolute;} @media (max-width:760px){ .skw-art > .bf-s{position:static;} }

/* ---- the field tile, redrawn (Mehul 2026-10-20: the pitch looked bad): a true diamond at fixed proportions, not stretched;
   real field colours in a soft light key; the nine chips placed on the same grid ---- */
.bf2{position:relative; width:100%; max-width:560px; aspect-ratio:100/84; height:auto !important; margin:0 auto;}
.bf2-d{position:absolute; inset:0; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 14px 22px rgba(30,80,50,.14));}
.bf2-d .g{fill:#d9efdf;} .bf2-d .w{fill:none; stroke:#c6dfcd; stroke-width:2.2;}
.bf2-d .dt{fill:#efe2cb;} .bf2-d .ig{fill:#cfe9d6;}
.bf2-d .ln{fill:none; stroke:#fff; stroke-width:.55; stroke-linejoin:round;}
.bf2-d .md{fill:#e8d8bb; stroke:#fff; stroke-width:.4;}
.bf2-d .bs rect, .bf2-d .hp{fill:#fff; stroke:#d6c7ab; stroke-width:.2;}
.bf2 .bf-p{padding:3px 9px 3px 3px; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 6px 14px -8px rgba(13,27,42,.35);}
.bf2 .bf-p b{font-size:12px;}
.t4 .skw-art{padding:22px 28px 18px !important;}
.t4 .bf-s{left:28px; top:22px;}
@media (max-width:760px){ .bf2 .bf-p b{display:none;} .bf2 .bf-p{padding:2px;} .t4 .skw-art{padding:16px 10px 12px !important;} }
.bf2-d path, .bf2-d circle, .bf2-d rect{stroke:none !important; vector-effect:none !important;}
.bf2-d .w{fill:none !important; stroke:#c6dfcd !important; stroke-width:2.2 !important;}
.bf2-d .ln{fill:none !important; stroke:#ffffff !important; stroke-width:.6 !important;}
.bf2-d .md{stroke:#fff !important; stroke-width:.4 !important;}
.bf2-d .bs rect, .bf2-d .hp{fill:#fff !important; stroke:#cdbd9f !important; stroke-width:.25 !important;}
.bf2-d .g{fill:#d9efdf !important;} .bf2-d .dt{fill:#efe2cb !important;} .bf2-d .ig{fill:#cfe9d6 !important;}

/* ---- field tile, final (Mehul 2026-10-20: less illustration, shorter): a white card like the other three, a header with the
   stat, and the field as quiet hairlines only, no fills; the chips carry the colour ---- */
.t4 .bf-s{display:none !important;}
.t4 .skw-art{display:grid; place-items:center; height:340px; min-height:0 !important; padding:26px 28px !important;}
.bfc{width:100%; max-width:600px; padding:16px 20px 12px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px #e3eaee, 0 18px 36px -24px rgba(13,27,42,.35);}
.bfc-h{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:10px; border-bottom:1px solid #eef2f4;}
.bfc-h b{display:block; font-size:14px; font-weight:600; color:var(--pc-ink);} .bfc-h small{font-size:12px; color:#62707c;}
.bfc-h em{font-style:normal; font-size:12.5px; color:#62707c; white-space:nowrap;} .bfc-h em b{display:inline; font-size:14px; color:#00726f; margin-right:3px;}
.bfc .bf2{max-width:none; aspect-ratio:auto; height:210px !important; margin-top:6px;}
.bfc .bf2-d{filter:none;}
.bf2-d .g, .bf2-d .dt, .bf2-d .ig{fill:none !important;}
.bf2-d .g{stroke:#e3eaee !important; stroke-width:.35 !important;}
.bf2-d .w{stroke:#dbe4e8 !important; stroke-width:.35 !important;}
.bf2-d .dt{stroke:#e8dcc6 !important; stroke-width:.35 !important;}
.bf2-d .ln{stroke:#b8c6cd !important; stroke-width:.35 !important;}
.bf2-d .md{fill:#f2ece0 !important; stroke:none !important;}
.bf2-d .bs rect, .bf2-d .hp{fill:#fff !important; stroke:#b8c6cd !important; stroke-width:.3 !important;}
.bf2 .bf-p{padding:2px 8px 2px 2px;} .bf2 .bf-p b{font-size:11.5px;}
@media (max-width:760px){ .t4 .skw-art{height:auto; padding:16px 12px !important;} .bfc{padding:12px 12px 8px;} .bfc .bf2{height:190px !important;} .bfc-h{flex-direction:column; gap:2px;} }
.bfc .bf2{width:262px !important; height:220px !important; aspect-ratio:100/84; margin:8px auto 4px;} @media (max-width:760px){ .bfc .bf2{width:238px !important; height:200px !important;} }
.bfc .bf2{width:300px !important; height:252px !important; margin:6px auto 2px;} .bf2 .bf-p b{display:none !important;} .bf2 .bf-p{padding:3px !important;} .bf2 .bf-p .sk-chip{min-width:30px; font-size:11px;} .t4 .skw-art{height:auto; min-height:340px !important;} @media (max-width:760px){ .bfc .bf2{width:250px !important; height:210px !important;} }
@media (min-width:761px){ .bfc .bf2{width:262px !important; height:220px !important;} .bfc{padding:14px 20px 10px;} .t4 .skw-art{padding:22px 28px !important;} }

/* ---- "Every camper, checked live", Stripe's exact corner treatment (Mehul 2026-10-20). Bottom-left: a wedge of parallel
   hairlines rising to the right, bounded by a diagonal, densest against a solid colour strip that runs up beside the window
   and fades upward. Top-right: the same hairlines in the corner wedge, with a solid colour block in the corner fading into
   them. One angle everywhere. ---- */
.ck-fan, .ck-hatch{display:none !important;}
.ck-stage::after{display:none !important;}
.ckl{position:absolute; z-index:-1; pointer-events:none;}
/* bottom-left wedge */
.ckl.bl{left:0; bottom:0; width:calc(36% - 64px); height:64%; clip-path:polygon(0 100%, 0 46%, 100% 0, 100% 100%);
  background:linear-gradient(90deg, rgba(0,122,118,.15), #0d8f89 85%);
  -webkit-mask-image:repeating-linear-gradient(157deg, transparent 0 6px, #000 6px 7px), linear-gradient(90deg, transparent 0%, #000 70%);
  -webkit-mask-composite:source-in; mask-image:repeating-linear-gradient(157deg, transparent 0 6px, #000 6px 7px), linear-gradient(90deg, transparent 0%, #000 70%); mask-composite:intersect;}
/* the solid strip beside the window */
.ckl.bls{left:calc(36% - 64px); bottom:0; width:64px; height:64%; clip-path:polygon(0 0, 100% -9%, 100% 100%, 0 100%);
  background:linear-gradient(0deg, #007a76 0%, #14a39b 35%, rgba(95,212,207,.55) 70%, rgba(95,212,207,0) 100%);}
/* top-right wedge */
.ckl.tr{right:0; top:0; width:52%; height:66%; clip-path:polygon(0 0, 100% 0, 100% 100%);
  background:linear-gradient(270deg, #6e58f0 0%, #9a8af5 45%, rgba(183,194,255,.4) 100%);
  -webkit-mask-image:repeating-linear-gradient(157deg, transparent 0 6px, #000 6px 7px), linear-gradient(270deg, #000 20%, transparent 95%);
  -webkit-mask-composite:source-in; mask-image:repeating-linear-gradient(157deg, transparent 0 6px, #000 6px 7px), linear-gradient(270deg, #000 20%, transparent 95%); mask-composite:intersect;}
/* the solid block in the corner */
.ckl.trs{right:0; top:0; width:96px; height:62%; background:linear-gradient(180deg, #6e58f0 0%, #8b78f3 40%, rgba(139,120,243,0) 100%);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 45%);}
@media (max-width:1240px){ .ckl.bl{width:calc(30% - 64px);} .ckl.bls{left:calc(30% - 64px);} }
@media (max-width:980px){ .ckl.bl, .ckl.bls{display:none;} .ckl.tr{width:80%; height:40%;} .ckl.trs{height:40%; width:60px;} }
/* the hairlines, curved and fine (Mehul 2026-10-20): ~3px apart, half a pixel wide, each a gentle curve so the bundle bends */
.ckl.bl, .ckl.tr{display:none !important;}
.ckv{position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none;}
.ckv path{fill:none; stroke-width:.6; vector-effect:non-scaling-stroke;}
.ckv-b path{stroke:url(#ckv-t);} .ckv-r path{stroke:url(#ckv-v);}
.ckl.trs{width:96px; height:62%; clip-path:none; background:linear-gradient(180deg,#6e58f0 0%,#8b78f3 45%,rgba(139,120,243,0) 100%);}
@media (max-width:1240px){ .ckv{display:none;} }
.ck-win{background:rgba(255,255,255,.28) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;} .ck-chrome span{background:rgba(255,255,255,.7);} .ck-chrome i{background:rgba(13,27,42,.14);}

/* ---- Stripe close-ups, matched (Mehul 2026-10-20). Bottom-left: straight hairlines fanning out of the corner under the window,
   wide at the far left, tight at the corner, over a colour wash that is strongest in that corner; a thin pale strip at the
   window's edge. Top-right: a hatched band above the window shading into violet, and a solid violet column to the right of
   the window with steep hatching, opening into a fan that fades to white. ---- */
.ckv, .ckl.trs{display:none !important;}
.ckf{position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none;}
.ckf path{fill:none; stroke-width:.8; vector-effect:non-scaling-stroke;}
.ckf-b path{stroke:url(#ckf-l);}
.ckf-r path{stroke:url(#ckf-v);}
.ckl.bls{left:calc(34% - 12px); width:12px; height:58%; clip-path:none; background:linear-gradient(0deg, rgba(95,212,207,.75), rgba(95,212,207,0));}
.ck-win{left:34%; right:120px;}
.ck-shell{grid-template-columns:170px minmax(0,1fr);}
.ckt{position:absolute; z-index:-1; pointer-events:none;}
.ckt.band{left:46%; right:0; top:0; height:26px;
  background:linear-gradient(90deg, rgba(95,212,207,.6) 0%, #9a8af5 55%, #6e58f0 100%);
  -webkit-mask-image:repeating-linear-gradient(55deg, transparent 0 5px, #000 5px 6.5px), linear-gradient(90deg, transparent 0, #000 25%);
  -webkit-mask-composite:source-in; mask-image:repeating-linear-gradient(55deg, transparent 0 5px, #000 5px 6.5px), linear-gradient(90deg, transparent 0, #000 25%); mask-composite:intersect;}
.ckt.col{right:0; top:0; width:120px; height:46%;
  background:repeating-linear-gradient(55deg, rgba(60,30,190,0) 0 6px, rgba(60,30,190,.28) 6px 7.2px), linear-gradient(180deg, #6e58f0 0%, #7c66f3 55%, rgba(124,102,243,0) 100%);}
@media (max-width:1240px){ .ckf, .ckt, .ckl.bls{display:none;} .ck-win{left:30%; right:26px;} }
@media (max-width:980px){ .ck-win{left:auto; right:auto;} }
.ckt.band{-webkit-mask-image:repeating-linear-gradient(-55deg, transparent 0 5px, #000 5px 6.5px), linear-gradient(90deg, transparent 0, #000 25%);
  mask-image:repeating-linear-gradient(-55deg, transparent 0 5px, #000 5px 6.5px), linear-gradient(90deg, transparent 0, #000 25%);}
.ckt.col{background:repeating-linear-gradient(-55deg, rgba(60,30,190,0) 0 6px, rgba(60,30,190,.28) 6px 7.2px), linear-gradient(180deg, #6e58f0 0%, #7c66f3 55%, rgba(124,102,243,0) 100%);}
.ck-win{background:linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(214,206,252,.55) 60%, rgba(183,170,250,.7) 100%) !important;}
.ckf rect{stroke:none !important;}
.ck-brand{white-space:nowrap; font-size:13.5px;} .ck-side{padding:22px 14px;}
/* right column, tidied: the solid hatched violet fades out smoothly; below it a neat fan, kept inside the column, fading down */
.ckf-r path{stroke:url(#ckf-vf) !important; stroke-width:.8;}
.ckt.col{height:52%; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%);
  background:repeating-linear-gradient(-55deg, rgba(60,30,190,0) 0 6px, rgba(60,30,190,.25) 6px 7.2px), #6e58f0;}
.ck-win{box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 30px 60px -30px rgba(13,27,42,.35) !important;}
.ck-win{background:linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(214,206,252,.55) 60%, rgba(183,170,250,.7) 100%) top/100% 44px no-repeat, #fff !important;}
.ckt.col{height:44%; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%);}
.ckf-r{display:none !important;} .ckt.col{height:62%; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 35%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 35%,transparent 100%);}
/* top-right, blended (Mehul 2026-10-20: no solid block): no rectangle. A soft violet glow from the corner, and the fine "/"
   hatch lines carried over it, both fading out in every direction, so the colour melts into the lines and into white */
.ckt.col{right:0; top:0; width:34%; height:78%; -webkit-mask-image:none; mask-image:none;
  background:radial-gradient(85% 70% at 100% 0%, rgba(110,88,240,.9) 0%, rgba(124,102,243,.55) 30%, rgba(160,145,248,.18) 58%, rgba(183,194,255,0) 78%);}
.ckt.col::after{content:""; position:absolute; inset:0;
  background:linear-gradient(225deg, #5a43e0, #8b78f3 50%, #b7c2ff);
  -webkit-mask-image:repeating-linear-gradient(-55deg, transparent 0 5px, #000 5px 6.3px), radial-gradient(95% 80% at 100% 0%, #000 25%, transparent 80%);
  -webkit-mask-composite:source-in; mask-image:repeating-linear-gradient(-55deg, transparent 0 5px, #000 5px 6.3px), radial-gradient(95% 80% at 100% 0%, #000 25%, transparent 80%); mask-composite:intersect;}
.ckt.band{right:0;}

/* ---- one spreadsheet, three sheets, final (Mehul 2026-10-20: our site, not a green stage; sheets turn faster): the same white
   16px frame as the other framed sections. Left: the three sheets as a quiet list with a thin progress track. Right: a light
   panel with a soft green corner wash and one Excel window; its sheet tabs switch with a crossfade every 3.8s ---- */
.xb{background:#fff !important; box-shadow:0 0 0 1px #e6ecef !important; padding:0 !important; gap:0 !important; grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr) !important;}
.xb::before{display:none !important;}
.xb .bi-list{align-self:center; padding:36px 36px 36px 40px !important;}
.xb .bi-item{grid-template-columns:30px 1fr; color:var(--pc-ink); border-bottom:1px solid #eef2f4 !important; padding:18px 0 20px !important;}
.xb .bi-item:last-child{border-bottom:0 !important;}
.xb-n{font-family:inherit !important; font-size:12.5px !important; font-weight:600; line-height:1.6 !important; color:#62707c !important;}
.xb .bi-item.on .xb-n{color:#1f7a45 !important;}
.xb .bi-item b{font-size:17px; color:#62707c;}
.xb .bi-item.on b, .xb .bi-item:hover b{color:var(--pc-ink);}
.xb .bi-item p{color:#62707c !important;} .xb .bi-item.on p{color:#5b6b78 !important;}
.xb .bi-prog{left:30px; bottom:-1px; height:2px; background:transparent;}
.xb .bi-prog i{background:#1f7a45 !important; animation-duration:3.8s !important;}
/* the panel */
.xb .sk-xl-pan{position:relative; overflow:hidden !important; padding:44px 40px !important; background:#f6f9fb !important; border-left:1px solid #e6ecef !important; border-radius:0 16px 16px 0;}
.xb .sk-xl-pan::after{content:""; display:block !important; position:absolute; z-index:0; right:-30%; bottom:-60%; width:90%; height:120%; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 140deg, #a6e2b4, #3fae72, #14a39b, #d6f3dc, #a6e2b4); opacity:.45; filter:blur(8px);
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent); mask-image:radial-gradient(closest-side,#000 55%,transparent);}
@media (prefers-reduced-motion:no-preference){ .xb .sk-xl-pan::after{animation:sw-wash 22s ease-in-out infinite alternate;} }
.xb .bi-card.sk-xl{position:relative !important; z-index:1;}
.xb .xl-sheets{height:400px !important; margin-top:0 !important;}
.xb .xl-sheet{right:0 !important; height:400px; border-radius:8px; box-shadow:0 0 0 1px #dfe8dc, 0 24px 44px -26px rgba(20,60,40,.4); transform:none !important; filter:none !important;
  opacity:0; transition:opacity .45s ease !important;}
.xb .xl-sheet[data-p="0"]{opacity:1;}
.xs-h{height:38px; background:#fff; color:var(--pc-ink); border-bottom:1px solid #e7ede5;}
.xs-h i{background:#1f7a45;} .xs-h span{background:#eef6ef; color:#1f7a45;}
.xb .xl-tabs{display:flex !important; position:absolute; left:1px; right:1px; bottom:1px; z-index:5; border-radius:0 0 8px 8px; background:#f3f6f2;}
.xb .xl-tabs span.on{color:#1f7a45; border-bottom-color:#1f7a45;}
.xs-in{height:calc(100% - 96px);}
@media (max-width:1100px){ .xb{grid-template-columns:1fr !important;} .xb .sk-xl-pan{border-left:0 !important; border-top:1px solid #e6ecef !important; border-radius:0 0 16px 16px;} .xb .bi-list{padding:24px 24px 8px !important;} }
@media (max-width:640px){ .xb .sk-xl-pan{padding:20px 12px !important;} .xb .xl-sheets{height:330px !important;} .xb .xl-sheet{height:330px;} .xb .xl-tabs span{padding:6px 7px; font-size:9.5px;} }


/* ---- paper stack (Mehul 2026-10-20): behind the open workbook, two printed copies of a sheet lie on the desk, slightly turned
   and a little out of focus, drifting a few pixels; green header band, ruled rows and faint text marks like a real printout ---- */
.xp{position:absolute; z-index:0; left:4%; right:4%; top:0; height:400px; border-radius:4px; pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0 6%, #c9d3cf 6% 30%, transparent 30% 38%, #d7dfdb 38% 46%, transparent 46% 54%, #d7dfdb 54% 62%, transparent 62% 70%, #d7dfdb 70% 78%, transparent 78%) 0 64px/100% 5px repeat-y,
    repeating-linear-gradient(180deg, transparent 0 25px, #e5ebe7 25px 26px) 0 52px/100% calc(100% - 52px) no-repeat,
    linear-gradient(180deg, #1f7a45 0 40px, #e6f2e7 40px 52px, #fff 52px);
  box-shadow:0 0 0 1px rgba(20,60,40,.08), 0 20px 40px -20px rgba(20,60,40,.35); filter:blur(1.4px);}
.xp.a{transform:translate(-26px,18px) rotate(-4.5deg); opacity:.75;}
.xp.b{transform:translate(30px,30px) rotate(3.2deg); opacity:.6; filter:blur(2.2px);}
@media (prefers-reduced-motion:no-preference){
  .xp.a{animation:xp-a 14s ease-in-out infinite alternate;} .xp.b{animation:xp-b 17s ease-in-out infinite alternate;}
}
@keyframes xp-a{to{transform:translate(-34px,12px) rotate(-5.6deg);}}
@keyframes xp-b{to{transform:translate(38px,36px) rotate(4.4deg);}}
.xb .xl-sheet{z-index:2;}
.xb .sk-xl-pan{padding:48px 56px 64px !important;}
@media (max-width:640px){ .xp{height:330px;} .xp.a{transform:translate(-12px,12px) rotate(-3.5deg);} .xp.b{transform:translate(14px,20px) rotate(2.5deg);} .xb .sk-xl-pan{padding:24px 18px 36px !important;} }

/* ---- built for prospect camps, Stripe feature row (2026-10-20): white, a hairline, three columns, small teal line icons,
   one sentence each, bold lead and grey rest. No band, no diamond, no big numbers ---- */
.rs.sk-college{background:#fff !important; color:var(--pc-text) !important;}
.rs.sk-college::before, .rs.sk-college::after{display:none !important;}
.rs.sk-college .pc-sh{color:#62707c !important;} .rs.sk-college .pc-sh b{color:var(--pc-ink) !important;}
.pf{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; margin-top:44px; padding-top:32px; border-top:1px solid #e6ecef;}
.pf-c i{display:grid; place-items:center; width:36px; height:36px; margin-bottom:18px; border-radius:9px; background:#eef6f5; box-shadow:inset 0 0 0 1px #d8ecea;}
.pf-c i svg{width:18px; height:18px; fill:none; stroke:#007a76; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.pf-c p{margin:0; font-size:16px; line-height:1.6; color:#62707c; max-width:26em;}
.pf-c p b{font-weight:600; color:var(--pc-ink);}
@media (max-width:900px){ .pf{grid-template-columns:1fr; gap:26px;} }

/* ==== hero, second layer: a faint lineup sheet, tilted, drifting (Mehul 2026-10-20) ==== */
.pc-hero.pp-hero-scheduler{isolation:isolate;}
.sklu{position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none;
  background:radial-gradient(40% 60% at 85% 75%, rgba(20,163,155,.18), transparent 70%), radial-gradient(35% 50% at 10% 10%, rgba(20,163,155,.10), transparent 70%);
  -webkit-mask:radial-gradient(60% 70% at 26% 52%, rgba(0,0,0,.18), #000 75%); mask:radial-gradient(60% 70% at 26% 52%, rgba(0,0,0,.18), #000 75%);}
.sklu::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(11,26,36,.035) 0 1px, transparent 1px 7px);}
.sklu-t{position:absolute; left:-12%; top:-30%; width:130%; transform:rotate(-8deg); display:flex; flex-direction:column; gap:22px; opacity:.55;}
@media (prefers-reduced-motion:no-preference){ .sklu-t{animation:sklu-drift 60s linear infinite;} }
@keyframes sklu-drift{from{translate:0 0;} to{translate:0 -38%;}}
.sklu .r{display:flex; align-items:center; gap:34px; white-space:nowrap;}
.sklu .r b{flex:0 0 170px; font-size:17px; font-weight:600; color:rgba(11,26,36,.22);}
.sklu .r i{flex:0 0 auto; font-style:normal; font-size:12px; font-weight:700; letter-spacing:.04em; color:rgba(11,26,36,.16);}
.sklu .r i.p{padding:3px 9px; border-radius:6px; background:rgba(242,166,90,.22); color:rgba(162,99,0,.45);}
.sklu .r i.c{padding:3px 9px; border-radius:6px; background:rgba(0,122,118,.10); color:rgba(0,96,93,.4);}
.sklu .r:nth-child(odd){margin-left:90px;}
@media (max-width:900px){ .sklu-t{width:220%; left:-40%;} .sklu{-webkit-mask:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 45%, #000 70%); mask:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 45%, #000 70%);} }
.sklu .r{gap:26px;} .sklu .r b{flex:0 0 150px; margin-left:30px;} .sklu-t{left:-8%; width:150%;}
@media (min-width:901px){ .sklu{-webkit-mask:radial-gradient(55% 62% at 24% 54%, rgba(0,0,0,.08), rgba(0,0,0,.4) 55%, #000 80%); mask:radial-gradient(55% 62% at 24% 54%, rgba(0,0,0,.08), rgba(0,0,0,.4) 55%, #000 80%);} }

/* ==== late scratch, take two: one frame, a wipe between the two cards, a giant baseball behind ==== */
.skb-bg{display:none !important;}
.skb{background:linear-gradient(180deg,#fbfcfd,#f5f8f7) !important;}
.skb-ballw{position:absolute; z-index:-1; right:-240px; bottom:-420px; width:820px; pointer-events:none; filter:drop-shadow(0 40px 60px rgba(13,40,60,.12));}
.skb-ballw::after{content:""; position:absolute; left:-30%; top:-10%; width:70%; height:60%; border-radius:50%; background:radial-gradient(closest-side, rgba(20,163,155,.14), transparent); z-index:-1;}
.skball{display:block; width:100%; height:auto;}
.skball .spin{transform-origin:500px 500px;}
@media (prefers-reduced-motion:no-preference){ .skball .spin{animation:skball-spin 90s linear infinite;} }
@keyframes skball-spin{to{transform:rotate(360deg);}}
.skb-grid{--x:50%; grid-template-columns:minmax(0,1fr) !important; overflow:hidden; border-radius:16px; cursor:ew-resize; touch-action:pan-y; background:#fff;}
.skb-grid > .skb-card{grid-area:1 / 1 !important; border:0 !important; min-width:0;}
.skb-grid > .skb-clean{clip-path:inset(0 0 0 var(--x)); background:#fff; z-index:2;}
.skb-grid > .skb-hand{z-index:1;}
.skb-grid > .skb-foot{grid-row:2 !important; grid-column:1 !important; z-index:3;}
.skw-div{grid-area:1 / 1; position:relative; z-index:4; pointer-events:none;}
.skw-div::before{content:""; position:absolute; top:0; bottom:0; left:var(--x); width:2px; margin-left:-1px; background:#007a76; box-shadow:0 0 0 4px rgba(0,122,118,.08);}
.skw-div i{position:absolute; top:50%; left:var(--x); width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; display:grid; place-items:center; background:#fff;
  box-shadow:0 0 0 2px #007a76, 0 12px 24px -8px rgba(0,96,93,.45);}
.skw-div i svg{width:18px; height:18px; fill:none; stroke:#007a76; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
@media (max-width:960px){ .skb-ballw{width:520px; right:-200px; bottom:-260px;} }
.skw-div em{position:absolute; top:20px; left:var(--x); padding:5px 11px; border-radius:20px; font-style:normal; font-size:12px; font-weight:600; white-space:nowrap;}
.skw-div em.l{transform:translateX(calc(-100% - 14px)); background:#fff3e0; color:#a24a00; box-shadow:0 0 0 1px #f4d9b8;}
.skw-div em.r{transform:translateX(14px); background:#e6f2f1; color:#00605d; box-shadow:0 0 0 1px #bfe0dd;}
.skb-grid .skb-hd > b{visibility:hidden;}
.skb-grid > .skb-clean{background:#fff !important;} .skb-grid > .skb-hand{background:#fbf8f1 !important;}
@media (max-width:560px){ .skb-grid .skb-st{display:none !important;} .skw-div em{top:14px; font-size:11px; padding:4px 9px;} }
/* each card keeps its own timeline in a wrapper that adds no box */
.skb-grid.skb-sub{display:contents !important;}
.skb-sub > .skb-card{grid-area:1 / 1 !important; border:0 !important; min-width:0;}
.skb-sub.sh-c > .skb-clean{clip-path:inset(0 0 0 var(--x)); background:#fff !important; z-index:2;}
.skb-sub.sh-h > .skb-hand{z-index:1; background:#fbf8f1 !important;}
.skb-foot i b{transition:width 1.2s ease !important;}
.skw-div em{transition:background-color .3s;}
@media (max-width:560px){ .skw-div em.l{max-width:46vw; white-space:normal; text-align:right;} .skw-div em.r{max-width:46vw; white-space:normal;} }
.skb-grid .skb-st{display:none !important;}
@media (max-width:560px){ .skw-div em.l, .skw-div em.r{max-width:none; white-space:nowrap;} }

/* hero field, sixth pass (Mehul 2026-10-21): a flat, light scorebook field like the "For baseball" slide: teal-striped
   outfield, a tan warning track under a teal fence, a clay infield with a striped grass square, white bases and
   position chips (infield blue, outfield green, pitcher and catcher amber) that settle in one by one */
.skf svg{filter:drop-shadow(0 30px 50px rgba(0,90,86,.16));}
.skf-skin,.skf-home,.skf-mound{fill:#ead3b8;}
.skf-mound{fill:#e3c7a6;}
.skf-fence{fill:none; stroke:#0b7f7a; stroke-width:6; stroke-linecap:round;}
.skf-line{fill:none; stroke:#fff; stroke-width:3.5; stroke-linecap:round;}
.skf-b rect,.skf-b path{fill:#fff; filter:drop-shadow(0 2px 2px rgba(40,60,50,.22));}
.skf-c rect{stroke-width:1.5; filter:drop-shadow(0 3px 4px rgba(13,40,50,.14));}
.skf-c text{font:700 15px/1 Archivo, system-ui, sans-serif; text-anchor:middle;}
.skf-c.if rect{fill:#e9f1fc; stroke:#c6d8f1;} .skf-c.if text{fill:#2f5f9e;}
.skf-c.of rect{fill:#eef7e7; stroke:#cfe5c2;} .skf-c.of text{fill:#3f7a2a;}
.skf-c.pc rect{fill:#fdecc9; stroke:#f1d49a;} .skf-c.pc text{fill:#8a5a00;}
@media (prefers-reduced-motion:no-preference){
  .skf-c{opacity:0; animation:skf-in .6s calc(.5s + var(--k) * .12s) cubic-bezier(.2,.8,.2,1) forwards;}
  @keyframes skf-in{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:none;}}
  .skf-c{transform-box:fill-box; transform-origin:center;}
}
/* the runner from the earlier field, back on the new one (Mehul 2026-10-21): same hit, trail and dot, on this field's bases */
.skf .skd-dot{offset-path:path('M500 720 L650 570 L500 450 L350 570 Z');}
/* clean pass (Mehul 2026-10-21): a true square diamond with white chalk basepaths, 2B in its real spot,
   and one smooth run around the bases (no stop at each bag) */
.skf-diamond{fill:none; stroke:#fff; stroke-width:4; stroke-linejoin:round; stroke-opacity:.95;}
.skf .skd-dot{offset-path:path('M500 720 L650 570 L500 420 L350 570 Z'); offset-rotate:0deg;}
@media (prefers-reduced-motion:no-preference){
  .skf .skd-dot{animation:skf-run 9s linear 3s infinite;}
  .skf .skd-trail{animation:skf-trail 9s linear 3s infinite;}
}
@keyframes skf-run{0%,9%{opacity:0; offset-distance:0%;} 11%{opacity:1; offset-distance:0%; animation-timing-function:cubic-bezier(.35,0,.65,1);}
  75%{opacity:1; offset-distance:100%;} 82%,100%{opacity:0; offset-distance:100%;}}
@keyframes skf-trail{0%,10%{opacity:0; stroke-dasharray:0 100;} 11%{opacity:.85; stroke-dasharray:0 100; animation-timing-function:cubic-bezier(.35,0,.65,1);}
  75%{opacity:.85; stroke-dasharray:100 0;} 86%,100%{opacity:0; stroke-dasharray:100 0;}}
/* the runner on its own layer (Mehul 2026-10-21: it lagged between bases): the field and its shadows are painted once,
   the dot moves by transform on the compositor, easing out of each base and stopping on the bag */
.skf .skf-base{filter:drop-shadow(0 30px 50px rgba(0,90,86,.16));}
.skf svg.skf-over{position:absolute; inset:0; width:100%; height:100%; filter:none;}
.skf-runner{position:absolute; inset:0; pointer-events:none; will-change:transform; transform:translate(50%,90%); opacity:0;}
.skf-runner i{position:absolute; left:-7px; top:-7px; width:14px; height:14px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 2px rgba(0,122,118,.35), 0 0 12px 3px rgba(255,255,255,.85);}
@media (prefers-reduced-motion:no-preference){
  .skf-runner{animation:skf-bases 9s 3s infinite;}
  .skf .skd-trail{animation:skf-trail2 9s 3s infinite;}
}
@keyframes skf-bases{
  0%,9%{opacity:0; transform:translate(50%,90%);}
  10%{opacity:1; transform:translate(50%,90%); animation-timing-function:cubic-bezier(.45,0,.4,1);}
  23%,27%{opacity:1; transform:translate(65%,71.25%); animation-timing-function:cubic-bezier(.45,0,.4,1);}
  40%,44%{opacity:1; transform:translate(50%,52.5%); animation-timing-function:cubic-bezier(.45,0,.4,1);}
  57%,61%{opacity:1; transform:translate(35%,71.25%); animation-timing-function:cubic-bezier(.45,0,.4,1);}
  74%,78%{opacity:1; transform:translate(50%,90%);}
  84%,100%{opacity:0; transform:translate(50%,90%);}}
@keyframes skf-trail2{
  0%,9%{opacity:0; stroke-dasharray:0 100;}
  10%{opacity:.85; stroke-dasharray:0 100; animation-timing-function:cubic-bezier(.45,0,.4,1);}
  23%,27%{stroke-dasharray:25 75; animation-timing-function:cubic-bezier(.45,0,.4,1);}
  40%,44%{stroke-dasharray:50 50; animation-timing-function:cubic-bezier(.45,0,.4,1);}
  57%,61%{stroke-dasharray:75 25; animation-timing-function:cubic-bezier(.45,0,.4,1);}
  74%,78%{opacity:.85; stroke-dasharray:100 0;}
  88%,100%{opacity:0; stroke-dasharray:100 0;}}

/* ---- scratch and re-assign, in the portal (Mehul 2026-10-21: clean UI, just our portal; second pass: smaller and
   sharper): a compact replica of the Lineup Builder with the portal's own labels and pill colours (sc-engine-web scheduler.css) ---- */
.rs.skp{background:#f6f9fc; border-top:0;}
.pt{max-width:1080px; margin:clamp(26px,3vw,40px) auto 0;}
.pt-win{background:#fff; border:1px solid #d9e0e6; border-radius:12px; overflow:hidden; box-shadow:0 1px 1px rgba(13,27,42,.04), 0 18px 44px -24px rgba(13,27,42,.28);
  font-family:Archivo,system-ui,sans-serif; color:#15181c; -webkit-font-smoothing:antialiased;}
.pt-bar0{display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#f8fafb; border-bottom:1px solid #e3e8ec;}
.pt-bar0 i{width:8px; height:8px; border-radius:50%; background:#d9dfe4;}
.pt-bar0 span{margin-left:10px; font-size:11px; font-weight:700; color:#7d868f;}
.pt-body{display:grid; grid-template-columns:196px minmax(0,1fr);}
.pt-aside{padding:14px 12px; border-right:1px solid #e3e8ec; background:#fbfcfd;}
.pt-eb{display:block; font-size:10px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; color:#008b8b;}
.pt-drop{margin-top:10px; padding:9px 10px; border:1px dashed #cdd5dc; border-radius:7px; background:#fff; transition:border-color .4s, background .4s;}
.pt-drop > b{display:block; font-size:11.5px; font-weight:800;} .pt-drop > small{font-size:10.5px; color:#8a939b;}
.pt-gone{display:flex; align-items:center; justify-content:space-between; gap:6px; max-height:0; margin-top:0; padding:0 8px; overflow:hidden; opacity:0;
  background:#fff; border:1px solid #dfe5ea; border-radius:6px; transition:max-height .5s, opacity .4s .15s, margin .5s, padding .5s;}
.pt-gone b{display:block; font-size:11.5px; font-weight:800;} .pt-gone small{font-size:9.5px; font-weight:600; text-transform:uppercase; color:#8a939b;}
.pt-gone u{text-decoration:none; font-size:10.5px; font-weight:800; color:#008b8b;}
.pt.cx .pt-gone{max-height:50px; margin-top:8px; padding:6px 8px; opacity:1;}
.pt.cx:not(.ra) .pt-drop{border-color:#d9877d; background:#fffafa;}
.pt-main{padding:14px 16px 12px; min-width:0;}
.pt-gh{display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin-bottom:10px;}
.pt-gh h4{margin:0; font-size:16px; font-weight:900; letter-spacing:-.01em;}
.pt-meta{font-size:11.5px; font-weight:500; color:#5f6870;}
.pt-stale{padding:2px 6px; border-radius:4px; background:#fdf1d6; border:1px solid #f0d49a; color:#7a4e0f; font-size:10px; font-weight:800; opacity:0; transition:opacity .3s;}
.pt.cx:not(.ra) .pt-stale{opacity:1;}
.pt-btn{position:relative; margin-left:auto; display:grid; padding:6px 11px; border-radius:6px; background:#15181c; color:#fff; font-size:11.5px; font-weight:700; transition:background .3s, box-shadow .3s, transform .15s;}
.pt-btn span{grid-area:1/1; transition:opacity .2s;} .pt-btn .t1{opacity:0;}
.pt.cx:not(.ra) .pt-btn{background:#008b8b; box-shadow:0 0 0 4px rgba(0,139,139,.15);}
.pt.go .pt-btn{transform:scale(.96);} .pt.go:not(.ra) .pt-btn .t0{opacity:0;} .pt.go:not(.ra) .pt-btn .t1{opacity:1;}
.pcur{position:absolute; right:-8px; bottom:-15px; width:18px; height:18px; fill:#15181c; stroke:#fff; stroke-width:1.5; opacity:0; transform:translate(12px,12px); transition:opacity .3s, transform .5s;}
.pt[data-step="1"] .pcur{opacity:1; transform:none;} .pt[data-step="1"].ra .pcur{opacity:0;}
.pt-card{background:#fff; border:1px solid #dfe5ea; border-radius:8px; overflow:hidden;}
.pt-ch{display:flex; align-items:center; gap:8px; padding:7px 12px; background:#f8fafb; border-bottom:1px solid #e3e8ec;}
.pt-home{padding:2px 6px; border-radius:3px; background:#dff4f3; color:#007f7f; font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;}
.pt-ch > b{font-size:12.5px; font-weight:800;}
.pt-cm{margin-left:auto; font-size:11px; color:#5f6870;} .pt-cm b{color:#15181c;}
.pt-grid{padding:0 12px 2px;}
.pt .pr{display:grid; grid-template-columns:18px minmax(0,1.9fr) repeat(5,minmax(0,1fr)) 64px; align-items:center; column-gap:6px; max-height:40px; overflow:hidden;
  border-bottom:1px solid #eef1f3; transition:max-height .6s ease, opacity .4s, background .4s;}
.pt .pr:last-child{border-bottom:0;}
.pt .pr > span{padding:5px 0;}
.pt .pth{border-bottom-color:#e3e8ec;} .pt .pth > span{font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#8a939b;}
.pt .pg{padding:6px 0 3px; font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#8a939b; border-bottom:1px solid #eef1f3;}
.pt .pn{font-size:10.5px; font-weight:800; color:#8a939b; font-variant-numeric:tabular-nums;}
.pt .pl{display:flex; align-items:baseline; gap:7px; min-width:0; white-space:nowrap;}
.pt .pl > b{font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis;}
.pt .pl small{font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:#8a939b; overflow:hidden; text-overflow:ellipsis;} .pt .pl small b{color:#4b545c;}
.pt .ptt{text-align:right;}
.pt-bar{display:flex; align-items:center; justify-content:flex-end; gap:6px;} .pt-bar i{position:relative; width:30px; height:3px; border-radius:3px; background:#e9edf0; overflow:hidden;}
.pt-bar i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); background:#00a3a3; transition:width .6s;}
.pt-bar em{font-style:normal; font-size:10px; font-weight:800; color:#4b545c; font-variant-numeric:tabular-nums;}
.pt .pc{display:flex; justify-content:center;}
.pt .pp{display:inline-block; min-width:30px; padding:3px 5px; border:1px solid; border-radius:3px; text-align:center; font-size:9.5px; font-weight:800; line-height:1.2; letter-spacing:.03em;}
.pt .pos-p{background:#fbe6bf; border-color:#e3bd77; color:#6e440a;} .pt .pos-c{background:#fff4e2; border-color:#ecd19b; color:#7f520f;}
.pt .pos-if{background:#e8f1fb; border-color:#a9cbe9; color:#285c95;} .pt .pos-of{background:#ecf5e5; border-color:#b8d9a0; color:#376e2a;}
.pt .pb{border-color:transparent; color:#c3ccd4;}
.pt .pc.flip .pp{box-shadow:0 0 0 1.5px #008b8b; animation:pt-pop .5s ease;}
@keyframes pt-pop{40%{transform:scale(1.15);}}
.pt .px{background:#fff;} .pt.cx .px{max-height:0; opacity:0; border-bottom-color:transparent;}
.pt .pu{max-height:0; opacity:0; border-bottom:0; background:#fdf6f5;} .pt .pu .pl > b{color:#a3322a;} .pt .pu .pl small{text-transform:none; letter-spacing:0;}
.pt .pu .pp{background:#fdeceb; border-color:#e19a91; color:#a3322a;}
.pt.cx:not(.ra) .pu{max-height:40px; opacity:1;}
.pt-audit{display:flex; align-items:center; gap:10px; margin-top:10px; padding:8px 12px; background:#fff; border:1px solid #dfe5ea; border-radius:8px; opacity:.5; transition:opacity .4s, border-color .4s;}
.pt-ok{flex:none; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#e9edf0; color:#8a939b; transition:background .4s, color .4s;}
.pt-ok svg{width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.pt-audit b{display:block; font-size:11.5px; font-weight:800;} .pt-audit small{font-size:10.5px; color:#5f6870;}
.pt-audit em{margin-left:auto; font-style:normal; font-size:10.5px; font-weight:800; color:#1f8a4c; white-space:nowrap;}
.pt.ok .pt-audit{opacity:1; border-color:#a9dcd8;} .pt.ok .pt-ok{background:#dff4f3; color:#007f7f;}
.pt-steps{list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2.4vw,32px);}
.ps{position:relative; display:block; width:100%; padding:14px 0 0; border:0; background:none; text-align:left; font:inherit; color:inherit; cursor:pointer;}
.ps::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:#dfe6eb;}
.ps-bar{position:absolute; left:0; top:0; height:2px; width:0; background:#007a76;}
.ps[aria-pressed="true"] .ps-bar{width:100%; transition:width var(--pt-dwell,4s) linear;}
.pt.still .ps[aria-pressed="true"] .ps-bar{transition:none;}
.ps-n{display:block; font-size:12px; font-weight:600; color:#62707c;}
.ps b{display:block; margin-top:5px; font-size:15px; font-weight:600; color:#62707c; transition:color .3s;}
.ps-p{display:block; margin-top:3px; font-size:13.5px; line-height:1.5; color:#62707c; transition:color .3s;}
.ps[aria-pressed="true"] b{color:#0d1b2a;} .ps[aria-pressed="true"] .ps-p{color:#5b6672;} .ps[aria-pressed="true"] .ps-n{color:#00726f;}
@media (max-width:900px){ .pt-body{grid-template-columns:1fr;} .pt-aside{border-right:0; border-bottom:1px solid #e3e8ec; padding:10px 12px;} }
@media (max-width:760px){
  .pt .pr{grid-template-columns:14px minmax(78px,1.5fr) repeat(5,minmax(0,1fr)) 26px; column-gap:3px;}
  .pt .pl{flex-direction:column; gap:0;} .pt .pl small{font-size:8.5px;}
  .pt-grid{padding:0 8px 2px;} .pt .pp{min-width:0; width:100%; padding:3px 0; font-size:8.5px;} .pt-bar i{display:none;} .pt .ptt{font-size:0 !important;}
  .pt .pr{max-height:44px;} .pt.cx:not(.ra) .pu{max-height:44px;}
  .pt-cm{display:none;} .pt-audit{flex-wrap:wrap;} .pt-audit em{margin-left:30px;}
  .pt-steps{grid-template-columns:1fr; gap:0;} .ps{padding:12px 0 10px;} .ps .ps-p{display:none;} .ps[aria-pressed="true"] .ps-p{display:block;}
}
@media (prefers-reduced-motion:reduce){ .pt *{transition:none !important; animation:none !important;} }
@media (max-width:760px){ .pt .pl > b > span{display:none;} .pt .pl > b{max-width:100%;} }
/* four rules cards (Mehul 2026-10-22: "bubbly, keep it subtle and classy"): no coloured blobs; one calm surface, a hairline
   edge and a single faint teal light in one corner */
.skw-t .skw-art{background:linear-gradient(180deg,#f8fafb 0%,#f1f5f7 100%) !important; box-shadow:inset 0 0 0 1px #e6ecef !important;}
.skw-t .skw-art::after{display:none !important; animation:none !important;}
.skw-t .skw-art::before{display:block !important; content:"" !important; position:absolute !important; inset:0 !important; z-index:-1; pointer-events:none;
  border:0 !important; background:radial-gradient(55% 60% at 100% 0%, rgba(0,122,118,.07), transparent 70%) !important;}

/* four rules cards, round 2 (Mehul 2026-10-22: blobs were bubbly, flat grey was too plain): a soft lit wash in the
   payments band colours, brand teal with a touch of cool blue, smooth and low contrast, light from a different corner per card */
.skw-t .skw-art{box-shadow:inset 0 0 0 1px rgba(0,122,118,.10) !important;}
.skw-t .skw-art::before{display:none !important;}
.skw-t .skw-art::after{display:none !important; animation:none !important;}
.skw-t.t1 .skw-art{background:radial-gradient(80% 90% at 0% 100%, rgba(18,165,143,.22), transparent 62%), radial-gradient(70% 80% at 100% 0%, rgba(90,111,240,.12), transparent 60%), linear-gradient(160deg,#f7fbfb,#eaf4f3) !important;}
.skw-t.t2 .skw-art{background:radial-gradient(80% 90% at 100% 100%, rgba(18,165,143,.22), transparent 62%), radial-gradient(70% 80% at 0% 0%, rgba(90,111,240,.11), transparent 60%), linear-gradient(200deg,#f7fbfb,#eaf4f3) !important;}
.skw-t.t3 .skw-art{background:radial-gradient(80% 90% at 0% 0%, rgba(18,165,143,.20), transparent 62%), radial-gradient(70% 80% at 100% 100%, rgba(90,111,240,.12), transparent 60%), linear-gradient(20deg,#f7fbfb,#eaf4f3) !important;}
.skw-t.t4 .skw-art{background:radial-gradient(80% 90% at 100% 0%, rgba(18,165,143,.22), transparent 62%), radial-gradient(70% 80% at 0% 100%, rgba(90,111,240,.11), transparent 60%), linear-gradient(-20deg,#f7fbfb,#eaf4f3) !important;}

/* four rules cards, round 3 (Mehul 2026-10-22: "change the entire background panel to some good colour with contrast"):
   one deep brand teal panel behind every card's UI, lit softly from the top so the white product cards stand out */
.skw .skw-t[class] .skw-art{background:radial-gradient(90% 70% at 30% 0%, rgba(33,227,210,.28), transparent 65%), radial-gradient(70% 60% at 100% 100%, rgba(90,111,240,.22), transparent 60%), linear-gradient(165deg,#0b8a84 0%,#006b67 55%,#05514f 100%) !important;
  box-shadow:none !important;}
.skw-t .skw-art > *{box-shadow:0 18px 40px -18px rgba(0,30,30,.55), 0 2px 6px rgba(0,30,30,.18) !important;}

/* four rules cards, round 4 (Mehul 2026-10-23: the deep teal stage pulled the eye before the product): Stripe's pale
   #f6f9fc behind every card with a hairline edge, so the white product cards are what you see first; no gradient, no glow */
.skw .skw-t[class] .skw-art{background:#f6f9fc !important; box-shadow:inset 0 0 0 1px #e6ebef !important;}
.skw-t .skw-art > *{box-shadow:0 0 0 1px rgba(50,50,93,.06), 0 24px 48px -16px rgba(50,50,93,.18), 0 12px 24px -14px rgba(0,0,0,.14) !important;}
.bp-h{width:100% !important; justify-self:stretch !important; align-self:stretch;} /* the header row had shrunk to its content, so "1" sat on "Pitching" */
.bp .bp-h{max-width:none !important;}

/* ---- four rules, the rule checker (Mehul 2026-10-23) ---- */
.rx{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(28px,4vw,56px); align-items:center; margin-top:clamp(32px,4vw,48px);}
.rx-rules{list-style:none; margin:0; padding:0; border-top:1px solid #e6ebef;}
.rx-rule{position:relative; display:grid; grid-template-columns:36px 1fr; gap:14px; width:100%; padding:18px 4px 18px 0; border:0; border-bottom:1px solid #e6ebef; background:none; text-align:left; font:inherit; color:inherit; cursor:pointer;}
.rx-ic{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#f3f6f8; transition:background .3s;}
.rx-ic svg{width:18px; height:18px; fill:none; stroke:#8a96a1; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s;}
.rx-rt b{display:block; padding-top:7px; font-size:17px; font-weight:500; letter-spacing:-.01em; color:#62707c; transition:color .3s;}
.rx-rp{display:block; max-height:0; overflow:hidden; opacity:0; font-size:15px; line-height:1.55; color:#56677a; transition:max-height .45s ease, opacity .35s, margin .3s;}
.rx-bar{position:absolute; left:0; bottom:-1px; height:2px; width:0; background:#007a76;}
.rx-rule[aria-pressed="true"] .rx-ic{background:#e7f5f3;} .rx-rule[aria-pressed="true"] .rx-ic svg{stroke:#007a76;}
.rx-rule[aria-pressed="true"] .rx-rt b{color:#0b1a24;}
.rx-rule[aria-pressed="true"] .rx-rp{max-height:120px; opacity:1; margin-top:6px;}
.rx-rule[aria-pressed="true"] .rx-bar{animation:rx-fill var(--rx-t,5s) linear forwards;}
.rx.held .rx-rule[aria-pressed="true"] .rx-bar{animation:none; width:100%;}
@keyframes rx-fill{to{width:100%;}}
.rx-rule:hover .rx-rt b{color:#0b1a24;} .rx-rule:focus-visible{outline:2px solid #007a76; outline-offset:2px; border-radius:6px;}
/* the lineup card */
.rx-card{padding:18px 20px 14px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px rgba(50,50,93,.07), 0 40px 80px -30px rgba(50,50,93,.28), 0 16px 32px -20px rgba(0,0,0,.18);}
.rx-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding-bottom:12px; border-bottom:1px solid #eef1f4;}
.rx-top b{display:block; font-size:15px; font-weight:600; color:#0b1a24;} .rx-top small{display:block; margin-top:2px; font-size:12px; color:#62707c;}
.rx-tags{position:relative; height:26px; min-width:220px;}
.rx-tag{position:absolute; right:0; top:0; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:#e7f5f3; color:#00605d; font-size:12px; font-weight:600; white-space:nowrap;
  opacity:0; transform:translateY(-4px); transition:opacity .3s, transform .3s;}
.rx-tag svg, .rx-foot svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.rx[data-r="roster"] .rx-tag[data-r="roster"], .rx[data-r="play"] .rx-tag[data-r="play"], .rx[data-r="pitch"] .rx-tag[data-r="pitch"], .rx[data-r="pos"] .rx-tag[data-r="pos"]{opacity:1; transform:none;}
.rx-grid{margin-top:6px;}
.rx-r{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(5,minmax(0,.52fr)) minmax(0,1fr); gap:5px; align-items:center; padding:4px 0; border-bottom:1px solid #f3f5f7;}
.rx-hd{font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#62707c; border-bottom-color:#eef1f4;}
.rx-n{min-width:0; padding:3px 6px; border-radius:6px; transition:background .3s;}
.rx-n b{display:block; font-size:12.5px; font-weight:600; color:#0b1a24; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .rx-n b span{font-weight:500; color:#56677a;}
.rx-n small{display:block; max-height:0; overflow:hidden; font-size:10.5px; color:#007a76; font-weight:600; transition:max-height .3s;}
.rx-c{display:grid; place-items:center; height:22px; border-radius:5px; font-size:10.5px; font-weight:700; transition:opacity .3s, box-shadow .3s, background .3s;}
.rx-hd .rx-c{height:auto;}
.rx-c.k-p{background:#fdf0d8; color:#8a5a10;} .rx-c.k-c{background:#f3e8ff; color:#6b3fb3;} .rx-c.k-if{background:#e8f0fd; color:#1f5fd1;} .rx-c.k-of{background:#e7f6ec; color:#1f7a45;}
.rx-sit{color:#c3ccd3; font-weight:500;}
.rx-t{display:flex; align-items:center; gap:8px; padding:0 4px;}
.rx-t i{flex:1; height:6px; border-radius:3px; background:#eef1f4; position:relative; overflow:hidden;}
.rx-t i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:3px; background:#c3ccd3; transition:background .3s;}
.rx-t em{font-style:normal; font-size:11.5px; font-weight:600; color:#56677a; width:12px; text-align:right;}
.rx-hd .rx-t{font-size:10.5px;}
/* what each rule lights up */
.rx[data-r="roster"] .rx-r:not(.rx-hd) .rx-n{background:#f1faf8;} .rx[data-r="roster"] .rx-n small{max-height:16px;}
.rx[data-r="roster"] .rx-c, .rx[data-r="roster"] .rx-t{opacity:.35;}
.rx[data-r="play"] .rx-c{opacity:.3;} .rx[data-r="play"] .rx-t i::after{background:#007a76;} .rx[data-r="play"] .rx-t em{color:#0b1a24;}
.rx[data-r="pitch"] .rx-c:not(.pit):not(.rx-hd .rx-c), .rx[data-r="pitch"] .rx-t{opacity:.25;} .rx[data-r="pitch"] .rx-c.pit{box-shadow:0 0 0 2px #e0a33a;}
.rx[data-r="pos"] .rx-c:not(.own), .rx[data-r="pos"] .rx-t{opacity:.28;} .rx[data-r="pos"] .rx-c.own{box-shadow:0 0 0 2px #007a76;}
.rx-hd .rx-c, .rx-hd .rx-t{opacity:1 !important; box-shadow:none !important;}
.rx-foot{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding-top:12px; margin-top:6px; border-top:1px solid #eef1f4; font-size:12px; color:#62707c;}
.rx-foot span{display:inline-flex; align-items:center; gap:5px; transition:color .3s;}
.rx-foot svg{color:#007a76;}
.rx[data-r="roster"] .rx-foot [data-r="roster"], .rx[data-r="play"] .rx-foot [data-r="play"], .rx[data-r="pitch"] .rx-foot [data-r="pitch"], .rx[data-r="pos"] .rx-foot [data-r="pos"]{color:#0b1a24; font-weight:600;}
.rx-foot em{margin-left:auto; font-style:normal; font-weight:600; color:#007a76;}
@media (max-width:960px){ .rx{grid-template-columns:minmax(0,1fr);} .rx-tags{min-width:0;} }
@media (max-width:560px){ .rx-card{padding:14px 12px 10px;} .rx-r{grid-template-columns:minmax(0,1.3fr) repeat(5,minmax(0,.5fr)) 46px;} .rx-t i{display:none;} .rx-top{flex-direction:column;} .rx-tags{align-self:stretch;} .rx-tag{left:0; right:auto;} .rx-foot em{margin-left:0;} }
@media (prefers-reduced-motion:reduce){ .rx *{transition:none !important; animation:none !important;} }
/* keep the card the same height on every rule: the positions line under each name is always there, just shown on Roster */
.rx-n small{max-height:none !important; height:14px; opacity:0; transition:opacity .3s;}
.rx[data-r="roster"] .rx-n small{opacity:1;}

/* rule checker, quieter (Mehul 2026-10-23: "less AI"): plain numerals instead of icon tiles, a grey caption instead of a
   pill with a tick, no rings or tints in the card. The open rule just keeps its own cells in colour and fades the rest. */
.rx-ic{width:auto; height:auto; padding-top:9px; border-radius:0; background:none !important; font-size:12px; font-weight:600; letter-spacing:.04em; color:#62707c; font-variant-numeric:tabular-nums;}
.rx-rule{grid-template-columns:28px 1fr;}
.rx-rule[aria-pressed="true"] .rx-ic{color:#007a76;}
.rx-bar{height:1px;}
.rx-card{box-shadow:0 0 0 1px rgba(50,50,93,.07), 0 24px 48px -24px rgba(50,50,93,.22) !important;}
.rx-tag{padding:0; border-radius:0; background:none; font-size:12px; font-weight:500; color:#56677a; padding-top:3px;}
.rx[data-r="roster"] .rx-r:not(.rx-hd) .rx-n{background:none;}
.rx-n small{color:#62707c; font-weight:500;}
.rx[data-r="pitch"] .rx-c.pit, .rx[data-r="pos"] .rx-c.own{box-shadow:none !important;}
.rx[data-r="play"] .rx-t i::after{background:#0b1a24;}
.rx-foot{gap:6px 12px; font-size:11.5px; color:#62707c;}
.rx-foot small{font-size:11.5px; color:#62707c;}
.rx-foot span + span::before{content:"·"; margin-right:12px; color:#d5dde3;}
.rx-foot span{gap:0;}

/* built for prospect camps, the stats band (Mehul 2026-10-23) */
.pst{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:clamp(32px,4vw,44px) 0 0; border-top:1px solid #e6ebef; border-bottom:1px solid #e6ebef;}
.pst > div{display:flex; flex-direction:column-reverse; justify-content:flex-end; padding:28px 28px 30px 0;}
.pst > div + div{padding-left:28px; border-left:1px solid #e6ebef;}
.pst dd{margin:0; font-size:clamp(48px,5vw,64px); font-weight:300; letter-spacing:-.03em; line-height:1; color:#0b1a24; font-variant-numeric:tabular-nums;}
.pst dd small{font-size:.44em; font-weight:300; color:#62707c; letter-spacing:0;}
.pst dd.t{color:#007a76;}
.pst dt{margin-top:18px; max-width:22em; font-size:15px; line-height:1.55; color:#56677a;}
.pst dt b{display:block; margin-bottom:4px; font-size:17px; font-weight:600; color:#0b1a24;}
@media (max-width:760px){ .pst{grid-template-columns:minmax(0,1fr);} .pst > div{padding:22px 0;} .pst > div + div{padding-left:0; border-left:0; border-top:1px solid #e6ebef;} }

/* Best fit tile: flat solid brand teal, no glow under it and no lift (Mehul 2026-10-23) */
.sk-fits .best{box-shadow:none !important; background:#007a76 !important; background-image:none !important; transform:none !important;}
/* "From roster to lineups" on phones (2026-10-28): the four steps were a tall list above a tall screen, so the step
   that changed and the screen that changed were never in view together. Now the steps are one row of four in a short
   card, the live step's line under it, and the screen right below. */
@media (max-width:620px){
  .sx .sk-list{display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:0 !important; margin:14px 12px 0 !important; padding:10px 6px 12px !important;}
  .sx .sk-item{display:flex !important; flex-direction:column; align-items:flex-start !important; gap:4px; padding:6px 8px 4px !important; min-height:44px;}
  .sx .sk-item::before{display:none !important;}
  .sx .sk-n{font-size:12px !important;}
  .sx .sk-it{padding-top:0;}
  .sx .sk-it b{font-size:11.5px !important; line-height:1.25 !important;}
  .sx .sk-it p,.sx .sk-item.on .sk-it p{display:none !important;}
  .sx .sk-prog{margin-top:6px !important; opacity:1 !important; width:100%;}
  .sx .sk-item:not(.on) .sk-prog i{width:0;}
  .sx .sk-item:has(~ .sk-item.on) .sk-prog i{animation:none !important; width:100% !important;}
  .sx .sk-list .skc-cap{display:block !important; grid-column:1 / -1; min-height:3.1em; margin:8px 8px 0 !important; font-size:13.5px; line-height:1.5; color:#5b6b78; text-align:left;}
}
@media (max-width:620px){ .sx .sk-front{height:560px !important;} .sx .sk-stage{height:600px !important;} }
@media (max-width:620px){ .sx .sk-list .skc-cap{min-height:4.5em;} }   /* room for three lines, so the screen below never shifts as the line changes */
/* "Every camper, checked live" window header (2026-10-28): the title, the Home · Game 1 pill and Team 1 each wrapped
   letter by letter when narrow. Each stays on one line; on a narrow card the pill and team drop under the title. */
.ck-mh{flex-wrap:wrap; gap:6px 12px;}
.ck-mh b,.ck-mh span,.ck-mh .sk-pill{white-space:nowrap;}
.ck-mh .sk-pill{font-size:9px; padding:4px 8px; line-height:1;}
@media (max-width:640px){ .ck-mh{justify-content:flex-start;} .ck-mh span{font-size:12.5px;} }
/* "Four rules, every lineup" on phones (2026-10-28): four stacked rules put the lineup card a screen below. The rules
   become a 2 x 2 of short tiles with the live rule's line under them, and the card (cut to its first rows) right below. */
.rx-cap{display:none;}
@media (max-width:640px){
  .rx{grid-template-columns:minmax(0,1fr) !important; gap:0 !important; margin-top:24px;}
  .rx-rules{display:grid; grid-template-columns:1fr 1fr; gap:8px; border-top:0;}
  .rx-rule{display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:78px; padding:12px 12px 14px; border:1px solid #e6ebef; border-radius:12px; background:#fff; overflow:hidden;}
  .rx-ic{width:auto; height:auto; padding:0; background:none !important; font-size:11px; font-weight:800; letter-spacing:.06em; color:#62707c;}
  .rx-rule[aria-pressed="true"] .rx-ic{color:#007a76;}
  .rx-rule[aria-pressed="true"]{border-color:#007a76; box-shadow:0 0 0 1px #007a76;}
  .rx-rt b{padding-top:0; font-size:13.5px; line-height:1.3; font-weight:600;}
  .rx-rp,.rx-rule[aria-pressed="true"] .rx-rp{display:none;}
  .rx-bar{bottom:0;}
  .rx-cap{display:block; min-height:4.5em; margin:12px 0 14px; font-size:14px; line-height:1.5; color:#56677a;}
  .rx-card{max-height:440px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent); mask-image:linear-gradient(180deg,#000 86%,transparent);}
  .rx-tags{min-width:0;}
}