/* =====================================================================
   CAMP DAY (SC-534): the hero, after Stripe Payments. The roster pieces are Luke's (SM_UI_Mockup
   checkin-showcase.css, hero only, brand teal); below them, the swapping window, the phone, the column guides
   and the colour band. Motion: scripts/page-camp-day.js.
   ===================================================================== */
/* =====================================================================
   CAMP-DAY CHECK-IN — hero art and showcase drawn by scripts/checkin-showcase.js.
   The hero uses the default mint pinstripe field (page-product.css);
   sections reuse .rs/.sh/.rs-item (registration-showcase.css), .bi-* panels
   (blog-showcase.css), .em-inc columns (email-showcase.css) and the
   .sk-faq accordion (scheduler-showcase.css).
   ===================================================================== */

/* ---- shared mock pieces: event bar, metrics, pills, roster rows ---- */
  .ci-evbar{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .ci-sel{display:inline-flex; align-items:center; gap:10px; padding:6px 10px; border:1px solid #e3e8ec; border-radius:6px; background:#fff; font-size:10px; font-weight:800; color:#0b1a24;}
  .ci-sel svg{width:10px; height:10px; color:#62707c;}
  .ci-ev{display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid #e3e8ec; border-radius:6px; background:#fff; transition:border-color .3s, box-shadow .3s;}
  .ci-ev b{font-size:9.5px; font-weight:800; color:#0b1a24;}
  .ci-ev small{font-size:8px; color:#62707c;}
  .ci-ev em{font-style:normal; font-size:7.5px; font-weight:800; padding:1px 5px; border-radius:100px; background:#eef1f3; color:#5b6b78;}
  .ci-ev.on{border-color:#0b1a24; box-shadow:inset 0 0 0 1px #0b1a24;}
  .ci-ms{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px;}
  .ci-m{padding:8px 10px; border:1px solid; border-left-width:3px; border-radius:4px;}
  .ci-m small{display:block; font-size:7px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:#5b6b78;}
  .ci-m b{display:block; margin-top:3px; font-size:17px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums;}
  .ci-m.b{background:#f3f6ff; border-color:#dde5fb; border-left-color:#2f5be0;} .ci-m.b b{color:#2f4fc0;}
  .ci-m.a{background:#fff7f0; border-color:#f6e2d0; border-left-color:#e07a1f;} .ci-m.a b{color:#c0651a;}
  .ci-m.g{background:#f1faf4; border-color:#d3eedb; border-left-color:#1f9d57;} .ci-m.g b{color:#127c4c;}
  .ci-pills{display:flex; gap:6px; margin-top:10px;}
  .ci-pills span{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid #e3e8ec; border-radius:100px; background:#fff; font-size:9px; font-weight:700; color:#0b1a24;}
  .ci-pills span.on{background:#eef1f3; border-color:#c9d2d9;}
  .ci-pills em{font-style:normal; font-size:7.5px; font-weight:800; padding:1px 6px; border-radius:100px; background:#e6ebef; color:#3b4a57; font-variant-numeric:tabular-nums;}
  .ci-tbl{margin-top:10px; background:#fff; border:1px solid #e6eaee; border-radius:6px; overflow:hidden;}
  .ci-r{display:grid; grid-template-columns:26px minmax(0,1.5fr) 62px 44px 50px 56px; align-items:center; gap:6px; padding:0 10px; height:30px;
    border-bottom:1px solid #f0f2f4; font-size:9.5px; color:#3b4a57;}
  .ci-r:last-child{border-bottom:0;}
  .ci-r > b{font-weight:800; color:#0b1a24; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .ci-hd{height:24px; background:#fafbfc; font-size:7px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:#5b6b78;}
  .ci-no{display:flex; align-items:center; justify-content:center; width:22px; height:16px; border:1px dashed #d3dbe1; border-radius:3px; font-size:8px; color:#62707c;}
  /* Check in → Done: red until they arrive, green once they're here */
  .ci-btn{position:relative; display:inline-flex; align-items:center; justify-content:center; height:18px; border-radius:4px; font-style:normal; font-size:8px; font-weight:800;
    transition:background .3s, border-color .3s, color .3s, transform .3s cubic-bezier(.2,.9,.3,1.3);}
  .ci-btn i{font-style:normal; display:inline-flex; align-items:center; gap:3px;}
  .ci-btn svg{width:8px; height:8px;}
  .ci-btn.todo,.ci-r .ci-btn{background:#fdeff1; border:1px solid #f5c6cf; color:#c0344d;}
  .ci-btn .d{display:none;}
  .ci-r.in .ci-btn,.ci-btn.done{background:#e7f6ee; border:1px solid #bfe6cf; color:#127c4c;}
  .ci-r.in .ci-btn .t,.ci-btn.done .t{display:none;}
  .ci-r.in .ci-btn .d,.ci-btn.done .d{display:inline-flex;}
  .ci-r.in .ci-btn{animation:ciTap .45s cubic-bezier(.2,.9,.3,1.3);}
  @keyframes ciTap{0%{transform:scale(1);} 35%{transform:scale(.88);} 100%{transform:scale(1);}}
  .ci-act{display:flex; justify-content:flex-end;}
  .ci-act i{font-style:normal; padding:3px 8px; border:1px solid #e3e8ec; border-radius:100px; font-size:7.5px; font-weight:800; color:#0b1a24; white-space:nowrap;}
  .ci-av{flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#0b1a24; color:#fff;
    font-size:8.5px; font-weight:800; letter-spacing:.4px;}
  .ci-av.lg{width:40px; height:40px; font-size:13px; background:#007a76;}

/* ---- hero ---- */
  .cih{position:relative; padding:0 64px 84px 0;}
  .ci-browser{position:relative; background:#f6f7f9; border:1px solid #cfd8de; border-radius:8px; overflow:hidden; box-shadow:0 30px 60px rgba(11,26,36,.16);}
  .ci-chrome{display:flex; gap:5px; padding:8px 10px; border-bottom:1px solid #dde3e8; background:#fff;}
  .ci-chrome i{width:7px; height:7px; border-radius:50%; background:#d5dce1;}
  .ci-app{padding:14px 14px 0;}
  .ci-title 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;}
  .ci-title small{display:block; margin:3px 0 10px; font-size:8.5px; color:#5b6b78;}
  .cih .ci-tbl{border-radius:6px 6px 0 0; border-bottom:0;}
  .cih .ci-evbar{flex-wrap:nowrap;} .cih .ci-ev small{display:none;}
  /* Live arrivals card, floating over the bottom right */
  .ci-live{position:absolute; z-index:2; right:0; bottom:0; width:212px; padding:14px 16px 12px; background:#fff; border:1px solid #e3e8ec; border-radius:10px;
    box-shadow:0 30px 60px rgba(11,26,36,.22);}
  .ci-live-h{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:10px; border-bottom:1px solid #eef1f3;}
  .ci-live-h b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:15px; letter-spacing:.3px; text-transform:uppercase; color:#0b1a24;}
  .ci-live-h small{font-size:8.5px; color:#62707c;}
  .ci-ring{position:relative; width:96px; height:96px; margin:12px auto 10px;}
  .ci-ring svg{width:100%; height:100%; transform:rotate(-90deg);}
  .ci-ring circle{fill:none; stroke:#e6f4f2; stroke-width:8;}
  .ci-ring circle.p{stroke:#007a76; stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1);}
  .ci-ring > span{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
  .ci-ring b{font-size:22px; font-weight:800; letter-spacing:-.02em; color:#0b1a24; line-height:1;}
  .ci-ring small{font-size:8.5px; font-weight:700; color:#62707c; text-transform:uppercase; letter-spacing:1px;}
  .ci-feed > small{display:block; margin-bottom:4px; font-size:7.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#62707c;}
  .ci-feed span{display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-top:1px solid #f3f5f7; font-size:10px;}
  .ci-feed span b{font-weight:700; color:#0b1a24;}
  .ci-feed span em{font-style:normal; font-size:8.5px; color:#127c4c; font-weight:700;}
  .ci-feed span.new{animation:ciIn .5s cubic-bezier(.2,.8,.2,1);}
  @keyframes ciIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
  .cd-fly.is-in .ci-browser{animation:ppRise .95s cubic-bezier(.2,.8,.2,1) .1s both;}
  .cd-fly.is-in .ci-live{animation:ppSwoop .9s cubic-bezier(.2,.8,.2,1) .6s both;}
  @media (prefers-reduced-motion:reduce){ .cd-fly.is-in .ci-browser,.cd-fly.is-in .ci-live{animation:none;} .ci-r.in .ci-btn,.ci-feed span.new{animation:none;} }
  @media (max-width:960px){ .cih{padding-right:44px;} }
  @media (max-width:620px){
    .cih{padding:0 24px 70px 0;} .ci-live{width:180px; zoom:.85;}
    .cih .ci-r{grid-template-columns:22px minmax(0,1.5fr) 58px 40px; } .cih .ci-r > :nth-child(n+5){display:none;} .cih .ci-m b{font-size:14px;}
    .cih .ci-evbar .ci-ev:last-child{display:none;}
  }



/* ---- the hero: Stripe Payments' structure ---- */
.cd-hero{background:#f6f9fb; overflow:hidden;}
.cd-hero::before, .cd-hero::after{display:none;}
/* faint dashed column guides, like Stripe's layout lines */
.cd-cols{position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:repeating-linear-gradient(180deg, #dfe6ea 0 4px, transparent 4px 9px), repeating-linear-gradient(180deg, #dfe6ea 0 4px, transparent 4px 9px), repeating-linear-gradient(180deg, #dfe6ea 0 4px, transparent 4px 9px);
  background-size:1px 100%, 1px 100%, 1px 100%; background-repeat:no-repeat;
  background-position:calc(50% - 600px) 0, 50% 0, calc(50% + 600px) 0;}
/* the colour band: a wide diagonal ribbon of our colours sweeping under the window, drifting slowly */
.cd-band{position:absolute; z-index:-1; left:-10%; right:-10%; bottom:-22%; height:62%; transform:skewY(-9deg); transform-origin:100% 0; pointer-events:none;
  background:linear-gradient(100deg, #0d3f6e 0%, #0e6f8a 22%, #14a39b 44%, #5fd4cf 58%, #7c8cf0 76%, #b9a6f7 92%, #f2c66e 100%); background-size:200% 100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 30%); mask-image:linear-gradient(90deg, transparent 0%, #000 30%);}
@media (prefers-reduced-motion:no-preference){ .cd-band{animation:cd-band 18s ease-in-out infinite alternate;} }
@keyframes cd-band{to{background-position:100% 0;}}
/* the swapping window */
.cdx{position:relative; align-self:center;}
.cdx-stage{position:relative; height:470px; margin-right:calc(-1 * var(--pc-gutter) - 2px);}
.cdx-scene{position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(14px) scale(.985); transition:opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1), visibility 0s .6s;}
.cdx-scene.on{opacity:1; visibility:visible; transform:none; transition:opacity .6s ease .1s, transform .7s cubic-bezier(.2,.8,.2,1) .1s, visibility 0s;}
.cdx-tag{position:absolute; z-index:3; right:28px; top:-30px; font-size:12px; font-weight:600; letter-spacing:.04em; color:#62707c;}
.cdx .cih{padding:0; height:100%;}
.cdx .ci-browser{height:100%; border:0; border-radius:10px 0 0 10px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 40px 80px -30px rgba(13,27,42,.35);}
.cdx .ci-chrome{background:#fff; padding:12px 16px;}
.cdx .ci-app{padding:18px 22px 0; background:#f8fafb;}
.cdx .ci-title b{font-size:22px;} .cdx .ci-title small{font-size:10.5px;}
.cdx .ci-ev b{font-size:11px;} .cdx .ci-sel{font-size:11.5px;} .cdx .ci-m b{font-size:20px;} .cdx .ci-m small{font-size:8.5px;}
.cdx .ci-r{height:36px; font-size:11.5px;} .cdx .ci-hd{height:28px; font-size:8.5px;}
/* the phone scene: a large phone standing in the same place */
.mob{display:grid; place-items:center;}
.cdx-phone{position:relative; width:270px; height:460px; padding:12px; border-radius:40px; background:#0d1b2a; box-shadow:0 40px 80px -30px rgba(13,27,42,.55), inset 0 0 0 2px #1f2f42;}
.cdx-notch{position:absolute; left:50%; top:20px; width:80px; height:20px; margin-left:-40px; border-radius:12px; background:#0d1b2a; z-index:2;}
.cdx-screen{height:100%; padding:40px 14px 14px; border-radius:30px; background:#f8fafb; overflow:hidden;}
.cdx-ph b{display:block; font-family:var(--pc-display,Anton),sans-serif; font-weight:400; font-size:17px; text-transform:uppercase; color:var(--pc-ink);}
.cdx-ph small{font-size:11px; color:#62707c;}
.cdx-screen .pc-ci-search{margin-top:10px;}
.cdx-screen .pc-ci-pills i{font-style:normal; font-weight:800;}
.cdx-screen ul{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:7px;}
.cdx-screen li{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px #e6ecef;}
.cdx-screen li b{display:block; font-size:12.5px; color:var(--pc-ink);} .cdx-screen li small{font-size:10.5px; color:#62707c;}
.cdx-screen li > i{font-style:normal; padding:5px 10px; border-radius:7px; font-size:11px; font-weight:700; background:#fdeff1; color:#c0344d; box-shadow:inset 0 0 0 1px #f5c6cf; white-space:nowrap;}
.cdx-screen li .d{display:none;} .cdx-screen li em{font-style:normal;}
.cdx-screen li.in > i{background:#e7f6ee; color:#127c4c; box-shadow:inset 0 0 0 1px #bfe6cf;} .cdx-screen li.in .t{display:none;} .cdx-screen li.in .d{display:inline;}
.cdx-screen li.tap > i{animation:ciTap .45s cubic-bezier(.2,.9,.3,1.3);}
.cd-link{display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:#00726f; text-decoration:none;}
.cd-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;}
.cd-link:hover .pc-arr-l{opacity:1;} .cd-link:hover .pc-arr-h{transform:translateX(3px);}
@media (prefers-reduced-motion:reduce){ .cdx-scene{transition:none;} }
@media (max-width:1100px){ .cdx-stage{margin-right:0; height:440px;} .cdx .ci-browser{border-radius:10px;} .cd-cols{display:none;} }
@media (max-width:640px){ .cdx-stage{height:400px;} .cdx .cih{zoom:.62;} .cdx .cih{height:calc(400px / .62);} .cdx-phone{zoom:.86;} .cd-band{height:40%;} }
/* polish: a wider window like Stripe's, the phone centred under it with sized-down pieces, no labels */
.cdx-tag{display:none;}
@media (min-width:1101px){ .cd-hero .pc-hero-in{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr) !important;} }
.mob{justify-items:center;}
.cdx-screen .pc-ci-search{padding:9px 12px; border-radius:10px; font-size:12px; background:#fff; box-shadow:0 0 0 1px #e3eaee;}
.cdx-screen .pc-ci-pills{display:flex; gap:5px; margin-top:10px;}
.cdx-screen .pc-ci-pills span{padding:5px 9px; border-radius:99px; font-size:10.5px; white-space:nowrap; background:#fff; box-shadow:0 0 0 1px #e3eaee; color:#41505d;}
.cdx-screen .pc-ci-pills span.is-on{background:#0d1b2a; color:#fff; box-shadow:none;}
.cdx-phone{width:280px; height:470px;}
.cdx-screen .pc-ci-pills{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent);}

/* ---- bigger window, a crisper phone with a better check-in screen (Mehul 2026-10-20) ---- */
.cdx-stage{height:540px;}
@media (min-width:1101px){ .cd-hero .pc-hero-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) !important;} }
.cdx .ci-app{padding:22px 26px 0;}
.cdx .ci-title b{font-size:26px;} .cdx .ci-title small{font-size:11.5px;}
.cdx .ci-ev b{font-size:12px;} .cdx .ci-sel{font-size:12.5px; padding:8px 12px;} .cdx .ci-m{padding:12px 14px;} .cdx .ci-m b{font-size:24px;} .cdx .ci-m small{font-size:9.5px;}
.cdx .ci-pills span{font-size:11px; padding:6px 12px;} .cdx .ci-r{height:42px; font-size:13px;} .cdx .ci-hd{height:30px; font-size:9px;}
.cdx .ci-btn{height:22px; font-size:10px;}
/* the phone: thin crisp bezel, true proportions, a clean status bar */
.cdx-phone{width:300px; height:620px; padding:9px; border-radius:46px; background:#0d1b2a; box-shadow:0 0 0 1px #2a3a4e, 0 1px 0 1px rgba(255,255,255,.06) inset, 0 50px 90px -30px rgba(13,27,42,.55);}
.cdx-notch{top:18px; width:92px; height:26px; margin-left:-46px; border-radius:14px; background:#05090f;}
.cdx-screen{padding:0; border-radius:38px; background:#f6f8f9; display:flex; flex-direction:column;}
.cdp-bar{display:flex; justify-content:space-between; align-items:center; height:50px; padding:0 26px 0 30px; font-size:13px; font-weight:700; color:var(--pc-ink);}
.cdp-sig{display:flex; align-items:flex-end; gap:2px;} .cdp-sig i{width:3px; border-radius:1px; background:var(--pc-ink);} .cdp-sig i:nth-child(1){height:5px;} .cdp-sig i:nth-child(2){height:8px;} .cdp-sig i:nth-child(3){height:11px;}
.cdp-top{display:flex; align-items:center; justify-content:space-between; padding:4px 18px 10px;}
.cdp-top b{font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--pc-ink);}
.cdp-sess{display:inline-flex; align-items:center; gap:4px; padding:6px 10px; border-radius:99px; background:#fff; box-shadow:0 0 0 1px #e3eaee; font-size:11.5px; font-weight:600; color:#41505d;}
.cdp-sess svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round;}
.cdp-prog{margin:0 18px; padding:12px 14px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px #e6ecef;}
.cdp-prog div{font-size:12.5px; color:#62707c;} .cdp-prog div b{font-size:20px; font-weight:700; color:var(--pc-ink); font-variant-numeric:tabular-nums;}
.cdp-prog > i{display:block; height:6px; margin-top:8px; border-radius:99px; background:#e8eef1; overflow:hidden;}
.cdp-prog > i b{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#007a76,#14a39b); transition:width .5s cubic-bezier(.2,.8,.2,1);}
.cdp-search{display:flex; align-items:center; gap:8px; margin:12px 18px 0; padding:10px 12px; border-radius:12px; background:#eef2f4; font-size:13px; color:#62707c;}
.cdp-search svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
.cdp-pills{display:flex; gap:6px; margin:10px 18px 0;}
.cdp-pills span{padding:6px 11px; border-radius:99px; background:#fff; box-shadow:0 0 0 1px #e3eaee; font-size:11.5px; font-weight:600; color:#41505d; white-space:nowrap;}
.cdp-pills span.on{background:#0d1b2a; color:#fff; box-shadow:none;}
.cdp-pills em{font-style:normal; margin-left:2px; color:#c0344d;}
.cdx-screen ul{flex:1; margin:12px 0 0; padding:0 18px; gap:8px; overflow:hidden; -webkit-mask-image:linear-gradient(#000 82%,transparent); mask-image:linear-gradient(#000 82%,transparent);}
.cdx-screen li{gap:10px; padding:10px 10px 10px 12px; border-radius:14px; box-shadow:0 0 0 1px #e6ecef, 0 1px 2px rgba(13,27,42,.04);}
.cdp-av{display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; background:#eef4f6; font-size:12px; font-weight:700; color:#41505d;}
.cdp-n{flex:1; min-width:0;} .cdp-n b{font-size:13.5px !important;} .cdp-n small{font-size:11px !important;}
.cdx-screen li > i{display:inline-flex; align-items:center; padding:8px 12px; border-radius:10px; font-size:12px; background:#007a76; color:#fff; box-shadow:none;}
.cdx-screen li > i svg{width:12px; height:12px; margin-right:4px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vertical-align:-1px;}
.cdx-screen li.in > i{background:#e7f6ee; color:#127c4c; box-shadow:inset 0 0 0 1px #bfe6cf;}
.cdx-screen li.in .cdp-av{background:#dcf2f0; color:#007a76;}
.cdx-screen .pc-ci-search, .cdx-screen .pc-ci-pills, .cdx-ph{display:none;}
@media (max-width:1100px){ .cdx-stage{height:520px;} }
@media (max-width:640px){ .cdx-stage{height:470px;} .cdx .cih{height:calc(470px / .62);} .cdx-phone{zoom:.74;} }
@media (min-width:1101px){ .cd-hero .pc-hero-in{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) !important;} }
.cdp-n b, .cdp-n small{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
@media (max-width:640px){ .cdx-stage{height:400px;} .cdx .cih{height:calc(400px / .62);} }

/* ---- how check-in works (Mehul 2026-10-20: improve it): one silk stage in warm sand and teal; the three steps sit on a
   frosted panel and play in turn; beside them the Command Center card shows that step: the sessions, campers being
   checked in, then only the ones still missing ---- */
.cw-stage{position:relative; display:grid; grid-template-columns:360px minmax(0,1fr); gap:28px; align-items:center; margin-top:40px; padding:40px; border-radius:16px; overflow:hidden; isolation:isolate;
  background:linear-gradient(125deg,#fff7e8 0%,#f9e2bd 20%,#a9e0d6 46%,#2fa79c 70%,#0f5f6a 100%); box-shadow:0 30px 60px -36px rgba(6,40,40,.5);}
.cw-art{position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none;}
.cw-silk path{fill:none; stroke:url(#cw-g1); stroke-width:1.1; vector-effect:non-scaling-stroke;} .cw-silk.b path{stroke:url(#cw-g2);}
.cw-fields{opacity:.6;}
@media (prefers-reduced-motion:no-preference){ .cw-silk.a{animation:sx-silk 26s ease-in-out infinite alternate;} .cw-silk.b{animation:sx-silk 32s ease-in-out infinite alternate-reverse;} }
@keyframes sx-silk{from{transform:translate(-40px,0) skewY(-1deg);} to{transform:translate(40px,-14px) skewY(1.2deg);}}
.cw-rail{padding:8px 22px; border-radius:12px; background:rgba(255,255,255,.8); -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);}
.cw-s{position:relative; display:grid; grid-template-columns:30px 1fr; width:100%; padding:16px 0 16px 16px; border:0; background:none; text-align:left; font:inherit; cursor:pointer;}
.cw-s::before{content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px; border-radius:2px; background:#e3e9ec;}
.cw-s.on::before, .cw-s.past::before{background:#007a76;}
.cw-k{padding-top:3px; font-size:12.5px; font-weight:600; color:#62707c;} .cw-s.on .cw-k{color:#00726f;}
.cw-t b{display:block; font-size:16px; font-weight:600; color:#62707c;} .cw-s.on .cw-t b, .cw-s:hover .cw-t b{color:var(--pc-ink);}
.cw-t p{max-height:0; overflow:hidden; opacity:0; margin:0; font-size:14px; line-height:1.55; color:#5b6b78; transition:max-height .45s, opacity .35s, margin .45s;}
.cw-s.on .cw-t p{max-height:90px; opacity:1; margin-top:6px;}
.cw-prog{display:block; height:2px; margin-top:12px; border-radius:2px; background:#e8eef1; opacity:0;} .cw-s.on .cw-prog{opacity:1;}
.cw-prog i{display:block; height:100%; width:0; background:#007a76;}
.cw-s.on .cw-prog i{animation:cw-fill 5s linear forwards;}
@keyframes cw-fill{to{width:100%;}}
.cw-s:focus-visible{outline:2px solid #007a76; outline-offset:2px; border-radius:6px;}
/* the card */
.cw-card{position:relative; height:440px; border-radius:12px; background:#fff; overflow:hidden; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 40px 70px -30px rgba(6,30,40,.55);}
.cw-chrome{display:flex; align-items:center; gap:6px; height:42px; padding:0 16px; border-bottom:1px solid #eef2f4;}
.cw-chrome i{width:9px; height:9px; border-radius:50%; background:#dfe4e8;} .cw-chrome span{margin-left:10px; font-size:12px; font-weight:600; color:#62707c;}
.cw-panes{position:relative; height:calc(100% - 42px);}
.cw-p{position:absolute; inset:0; padding:22px 26px; opacity:0; transform:translateY(10px); transition:opacity .45s, transform .5s cubic-bezier(.2,.8,.2,1); pointer-events:none;}
.cw-p.on{opacity:1; transform:none;}
.cw-ph{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px;}
.cw-ph > b{font-family:var(--pc-display,Anton),sans-serif; font-weight:400; font-size:21px; text-transform:uppercase; color:var(--pc-ink);}
.cw-ph small{font-size:13px; color:#62707c;} .cw-ph small b{color:#127c4c; font-size:15px;}
.cw-ev{display:flex; align-items:center; justify-content:space-between; padding:13px 16px; margin-bottom:8px; border-radius:10px; box-shadow:0 0 0 1px #e3eaee; transition:box-shadow .3s, background .3s;}
.cw-ev b{display:block; font-size:14px; color:var(--pc-ink);} .cw-ev small{font-size:12px; color:#62707c;}
.cw-ev em{font-style:normal; padding:3px 10px; border-radius:99px; background:#eef2f4; font-size:12px; font-weight:700; color:#41505d;}
.cw-ev.on{background:#f2faf9; box-shadow:0 0 0 1.5px #007a76;} .cw-ev.on em{background:#007a76; color:#fff;}
.cw-ms{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px;}
.cw-ms span{padding:12px 14px; border-radius:10px; background:#f8fafb; box-shadow:inset 0 0 0 1px #e8eef1;}
.cw-ms small{display:block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#62707c;}
.cw-ms b{font-size:20px; font-weight:700; color:var(--pc-ink); font-variant-numeric:tabular-nums;} .cw-ms .g b{color:#127c4c;}
.cw-r{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #f0f3f5;}
.cw-av{display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; background:#eef4f6; font-size:12px; font-weight:700; color:#41505d; transition:background .3s, color .3s;}
.cw-n{flex:1; min-width:0;} .cw-n b{display:block; font-size:14px; color:var(--pc-ink);} .cw-n small{font-size:12px; color:#62707c;}
.cw-r .b{display:inline-flex; align-items:center; gap:5px; padding:8px 14px; border-radius:9px; font-style:normal; font-size:12.5px; font-weight:700; background:#007a76; color:#fff; transition:background .3s, color .3s;}
.cw-r .b svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.cw-r.done .b{background:#e7f6ee; color:#127c4c; box-shadow:inset 0 0 0 1px #bfe6cf;} .cw-r.done .cw-av{background:#dcf2f0; color:#007a76;}
.cw-r.tap .b{animation:ciTap .45s cubic-bezier(.2,.9,.3,1.3);}
.cw-pills{display:flex; gap:6px; margin-bottom:8px;}
.cw-pills span{padding:6px 12px; border-radius:99px; box-shadow:0 0 0 1px #e3eaee; font-size:12px; font-weight:600; color:#41505d;}
.cw-pills span.on{background:#0d1b2a; color:#fff; box-shadow:none;} .cw-pills em{font-style:normal; margin-left:3px; opacity:.75;}
.cw-foot{display:flex; align-items:center; gap:6px; margin-top:14px; font-size:13px; font-weight:600; color:#127c4c;}
.cw-foot svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;}
@media (prefers-reduced-motion:reduce){ .cw-p, .cw-t p{transition:none;} }
@media (max-width:1000px){ .cw-stage{grid-template-columns:1fr; padding:22px;} }
@media (max-width:560px){ .cw-stage{padding:14px 12px;} .cw-rail{padding:4px 14px;} .cw-card{height:460px;} .cw-p{padding:16px;} .cw-ms{grid-template-columns:1fr 1fr;} .cw-ms .g{grid-column:1/-1;} }
@media (max-width:560px){ .cw-card{height:530px;} .cw-ev{padding:11px 12px;} .cw-ph > b{font-size:18px;} }
.cw-s.on .cw-prog i{animation-duration:3.2s;}

/* ---- every detail on hand (Mehul 2026-10-20: improve it): copy with four quiet icon lines; beside it the roster with Jonah
   selected and his drawer sliding out over it, its groups settling in one by one; a soft corner wash behind ---- */
.dd{background:#fff;}
.dd-in{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:center;}
.dd-list{margin:30px 0 0; padding:0; list-style:none; display:grid; gap:18px;}
.dd-list li{display:flex; gap:14px; align-items:flex-start;}
.dd-list li > span{display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:9px; background:#eef6f5; box-shadow:inset 0 0 0 1px #d8ecea;}
.dd-list svg{width:17px; height:17px; fill:none; stroke:#007a76; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.dd-list p{margin:5px 0 0; font-size:16px; color:#62707c;} .dd-list p b{font-weight:600; color:var(--pc-ink);}
.dd-stage{position:relative; height:470px; border-radius:16px; overflow:hidden; isolation:isolate; background:#f6f9fb; box-shadow:inset 0 0 0 1px #e6ecef;}
.dd-stage::before{content:""; position:absolute; z-index:-1; right:-30%; top:-60%; width:90%; height:130%; border-radius:50%; filter:blur(8px); opacity:.5;
  background:conic-gradient(from 30deg, #5fd4cf, #14a39b, #7c8cf0, #d6f3ef, #5fd4cf); -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){ .dd-stage::before{animation:sw-wash 22s ease-in-out infinite alternate;} }
@keyframes sw-wash{from{transform:rotate(0) scale(1);} to{transform:rotate(28deg) scale(1.08);}}
.dd-roster{position:absolute; left:28px; top:28px; bottom:-10px; width:58%; padding:16px 18px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px #e3eaee;}
.dd-rh{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:10px; border-bottom:1px solid #eef2f4;}
.dd-rh b{font-size:14px; color:var(--pc-ink);} .dd-rh small{font-size:12px; color:#62707c;}
.dd-rr{display:grid; grid-template-columns:1fr auto 54px; align-items:center; gap:10px; height:44px; padding:0 8px; border-bottom:1px solid #f1f4f6; font-size:13px; color:#41505d;}
.dd-rr b{font-weight:600; color:var(--pc-ink);} .dd-rr i{height:20px; border-radius:6px; background:#e7f6ee;}
.dd-rr.sel{margin:0 -8px; padding:0 16px; border-radius:8px; background:#eef6f5; box-shadow:inset 3px 0 0 #007a76;}
.dd-drawer{position:absolute; right:22px; top:22px; bottom:22px; width:54%; padding:20px 20px; border-radius:12px; background:#fff;
  box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 30px 60px -24px rgba(13,27,42,.45); transform:translateX(40px); opacity:0; transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s;}
.dd-h{display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid #eef2f4;}
.dd-av{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#007a76; color:#fff; font-size:14px; font-weight:700;}
.dd-h b{display:block; font-size:16px; color:var(--pc-ink);} .dd-h small{font-size:12px; color:#62707c;}
.dd-h em{margin-left:auto; padding:4px 10px; border-radius:99px; background:#e7f6ee; color:#127c4c; font-style:normal; font-size:11.5px; font-weight:700;}
.dd-grp{padding:12px 0; border-bottom:1px solid #f1f4f6; opacity:0; transform:translateY(8px); transition:opacity .4s, transform .45s cubic-bezier(.2,.8,.2,1);}
.dd-grp:last-child{border-bottom:0;}
.dd-grp > small{display:block; margin-bottom:6px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#62707c;}
.dd-kv{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; color:#41505d; line-height:1.7;}
.dd-kv b.ok{color:#127c4c;} .dd-kv b.warn{padding:2px 9px; border-radius:99px; background:#fff3e0; color:#b4610e; font-size:12px;}
.dd-pdf{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:8px; box-shadow:inset 0 0 0 1px #e3eaee; font-size:12px; font-weight:600; color:var(--pc-ink);}
.dd-pdf svg{width:13px; height:13px; fill:none; stroke:#c0344d; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.dd-tags{display:flex; gap:5px;} .dd-tags i{font-style:normal; padding:2px 8px; border-radius:99px; background:#eef2ff; color:#3b4fb8; font-size:11.5px; font-weight:600;}
.dd-stage.in .dd-drawer{transform:none; opacity:1;}
.dd-stage.in .dd-grp{opacity:1; transform:none;}
.dd-stage.in .g1{transition-delay:.45s;} .dd-stage.in .g2{transition-delay:.6s;} .dd-stage.in .g3{transition-delay:.75s;} .dd-stage.in .g4{transition-delay:.9s;}
@media (prefers-reduced-motion:reduce){ .dd-drawer, .dd-grp{transition:none;} }
@media (max-width:1000px){ .dd-in{grid-template-columns:1fr; gap:32px;} }
@media (max-width:560px){ .dd-stage{height:500px;} .dd-roster{left:14px; width:auto; right:14px; top:14px;} .dd-drawer{left:14px; right:14px; top:120px; bottom:14px; width:auto; padding:16px;} .dd-tags i:last-child{display:none;} }
@media (max-width:560px){ .dd-stage{height:560px;} .dd-drawer{top:110px;} .dd-grp{padding:9px 0;} }

/* ---- changes on the day (Mehul 2026-10-20: improve it): one stage that plays the move. The dialog picks the new session,
   "Yes, move them" is pressed, the dialog steps back and the family's email lands; then it starts over. Four quiet
   lines beside it. ---- */
.mv{background:#f6f9fb;}
.mv-in{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center; margin-top:40px;}
.mv-stage{position:relative; height:440px; border-radius:16px; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,#eef6ff 0%,#dcefee 45%,#c9ebe4 100%); box-shadow:inset 0 0 0 1px #e1eaee;}
.mv-stage::before{content:""; position:absolute; z-index:-1; left:-25%; bottom:-70%; width:90%; height:140%; border-radius:50%; filter:blur(8px); opacity:.55;
  background:conic-gradient(from 200deg, #ffd27a, #f3a65a, #14a39b, #7c8cf0, #ffd27a); -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent); mask-image:radial-gradient(closest-side,#000 55%,transparent);}
.mv-dlg{position:absolute; left:8%; top:44px; width:360px; padding:20px 22px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 30px 60px -24px rgba(13,27,42,.45);
  transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s, filter .5s;}
.mv-dh{display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid #eef2f4;}
.mv-dh b{font-size:16px; color:var(--pc-ink);} .mv-dh i{font-style:normal; font-size:18px; color:#62707c;}
.mv-dlg > p{margin:14px 0 10px; font-size:13.5px; color:#5b6b78;} .mv-dlg > p b{color:var(--pc-ink);}
.mv-opt{display:flex; align-items:center; justify-content:space-between; padding:11px 14px; margin-bottom:8px; border-radius:10px; box-shadow:0 0 0 1px #e3eaee; transition:box-shadow .3s, background .3s;}
.mv-opt b{display:block; font-size:13.5px; color:var(--pc-ink);} .mv-opt small{font-size:11.5px; color:#62707c;}
.mv-opt.o1{opacity:.55;}
.mv-opt i{width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1.5px #c9d3d8; transition:box-shadow .3s;}
.mv-warn{display:flex !important; align-items:center; gap:7px; font-size:12.5px !important; color:#00726f !important;}
.mv-warn svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round;}
.mv-btns{display:flex; justify-content:flex-end; gap:8px; margin-top:6px;}
.mv-btns span{padding:9px 14px; border-radius:9px; font-size:13px; font-weight:700; color:#41505d; box-shadow:inset 0 0 0 1px #e3eaee;}
.mv-btns .go{background:#007a76; color:#fff; box-shadow:0 8px 16px -8px rgba(0,122,118,.7); transition:transform .15s, background .3s;}
.mv-mail{position:absolute; right:7%; bottom:44px; width:330px; padding:16px 18px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 30px 60px -24px rgba(13,27,42,.45);
  opacity:0; transform:translateY(24px) scale(.97); transition:opacity .5s, transform .7s cubic-bezier(.2,.8,.2,1);}
.mv-mh{display:flex; align-items:center; gap:10px;} .mv-ic{display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:#0d1b2a; color:#fff; font-size:11px; font-weight:800;}
.mv-mh b{display:block; font-size:13.5px; color:var(--pc-ink);} .mv-mh small{font-size:11.5px; color:#62707c;}
.mv-subj{display:block; margin-top:12px; font-size:14px; color:var(--pc-ink);}
.mv-mail p{margin:4px 0 0; font-size:12.5px; line-height:1.5; color:#62707c;}
.mv-done{position:absolute; left:8%; bottom:44px; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:99px; background:#0d1b2a; color:#fff; font-size:12.5px; font-weight:700;
  opacity:0; transform:translateY(10px); transition:opacity .4s, transform .5s;}
.mv-done svg{width:14px; height:14px; fill:none; stroke:#5fd4cf; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;}
/* the play: .s1 pick, .s2 press, .s3 sent */
.mv-stage.s1 .o2{background:#f2faf9; box-shadow:0 0 0 1.5px #007a76;} .mv-stage.s1 .o2 i{box-shadow:inset 0 0 0 5px #007a76;}
.mv-stage.s2 .go{transform:scale(.95); background:#00605d;}
.mv-stage.s3 .mv-dlg{transform:translate(-30px,-16px) scale(.9); opacity:.45; filter:blur(1px);}
.mv-stage.s3 .mv-mail{opacity:1; transform:none;}
.mv-stage.s3 .mv-done{opacity:1; transform:none; transition-delay:.3s;}
.mv-list{margin:0; padding:0; list-style:none; display:grid; gap:20px;}
.mv-list li{display:flex; gap:14px; align-items:flex-start;}
.mv-list li > span{display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:9px; background:#fff; box-shadow:inset 0 0 0 1px #d8ecea;}
.mv-list svg{width:17px; height:17px; fill:none; stroke:#007a76; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.mv-list p{margin:5px 0 0; font-size:16px; line-height:1.5; color:#62707c;} .mv-list p b{font-weight:600; color:var(--pc-ink);}
@media (prefers-reduced-motion:reduce){ .mv-stage *{transition:none !important;} }
@media (max-width:1000px){ .mv-in{grid-template-columns:1fr; gap:30px;} }
@media (max-width:560px){ .mv-stage{height:470px;} .mv-dlg{left:12px; right:12px; width:auto; top:16px; padding:16px;} .mv-mail{left:12px; right:12px; width:auto; bottom:62px;} .mv-done{left:12px; bottom:14px;} }

/* ---- built for the check-in table (Mehul 2026-10-20: improve it): a four-tile bento like the Scheduler's rules. Light
   panels, a soft corner wash each, a white card showing the feature; captions under each tile ---- */
.bz{background:#fff;}
.bz-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; margin-top:40px;}
.bz-t{display:flex; flex-direction:column;} .b1{grid-column:span 7;} .b2{grid-column:span 5;} .b3{grid-column:span 5;} .b4{grid-column:span 7;}
.bz-art{position:relative; height:320px; display:grid; place-items:center; padding:28px; border-radius:16px; overflow:hidden; isolation:isolate; background:#f6f9fb; box-shadow:inset 0 0 0 1px #e6ecef;}
.bz-art::after{content:""; position:absolute; z-index:-1; width:120%; height:150%; border-radius:50%; filter:blur(8px); opacity:.5; pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent); mask-image:radial-gradient(closest-side,#000 55%,transparent);}
.b1 .bz-art::after{left:-50%; bottom:-95%; background:conic-gradient(from 200deg,#ffd27a,#14a39b,#0d6f86,#ffd27a);}
.b2 .bz-art::after{right:-60%; top:-100%; background:conic-gradient(from 20deg,#5fd4cf,#7c8cf0,#b9a6f7,#5fd4cf);}
.b3 .bz-art::after{right:-60%; bottom:-100%; background:conic-gradient(from 120deg,#ffe0a8,#f7b267,#e98a52,#ffe0a8);}
.b4 .bz-art::after{left:-50%; top:-100%; background:conic-gradient(from 300deg,#a6e2b4,#3fae72,#14a39b,#a6e2b4);}
@media (prefers-reduced-motion:no-preference){ .bz-art::after{animation:sw-wash 20s ease-in-out infinite alternate;} .b2 .bz-art::after{animation-duration:24s;} .b3 .bz-art::after{animation-duration:22s;} }
.bz-t > p{margin:18px 4px 0; font-size:16px; line-height:1.55; color:#62707c;} .bz-t > p b{font-weight:600; color:var(--pc-ink);}
.bz-card{width:100%; max-width:440px; padding:16px 18px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px #e3eaee, 0 18px 36px -24px rgba(13,27,42,.35);}
/* 1: search */
.bz-sf{display:flex; align-items:center; gap:8px; padding:11px 14px; border-radius:10px; box-shadow:0 0 0 1.5px #007a76, 0 0 0 5px rgba(0,122,118,.1); font-size:15px; color:var(--pc-ink);}
.bz-sf svg{width:16px; height:16px; fill:none; stroke:#8796a2; stroke-width:2; stroke-linecap:round;}
.bz-q i{font-style:normal; opacity:0;} .bz-caret{width:1.5px; height:18px; background:#007a76; animation:bz-blink 1s steps(1) infinite;}
@keyframes bz-blink{50%{opacity:0;}}
.bz-res{margin-top:10px;}
.bz-rr{display:flex; align-items:center; gap:12px; padding:9px 4px; border-bottom:1px solid #f1f4f6; opacity:0; transform:translateY(6px); transition:opacity .35s, transform .4s;}
.bz-rr:last-child{border-bottom:0;}
.bz-av{display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; background:#eef4f6; font-size:11.5px; font-weight:700; color:#41505d;} .bz-av.p{background:#eef2ff; color:#3b4fb8;}
.bz-rr b{display:block; font-size:14px; font-weight:600; color:var(--pc-ink);} .bz-rr small{font-size:12px; color:#62707c;}
.bz-rr mark{background:#dcf2f0; color:#00605d; border-radius:3px; padding:0 1px;}
.bz.in .bz-q i{opacity:1; transition:opacity 0s;} .bz.in .bz-q i:nth-child(1){transition-delay:.3s;} .bz.in .bz-q i:nth-child(2){transition-delay:.5s;} .bz.in .bz-q i:nth-child(3){transition-delay:.7s;} .bz.in .bz-q i:nth-child(4){transition-delay:.9s;}
.bz.in .bz-rr{opacity:1; transform:none;} .bz.in .bz-rr:nth-child(1){transition-delay:1.1s;} .bz.in .bz-rr:nth-child(2){transition-delay:1.25s;} .bz.in .bz-rr:nth-child(3){transition-delay:1.4s;}
/* 2: role */
.bz-role{max-width:320px;}
.bz-rh{display:flex; align-items:center; gap:12px; padding-bottom:12px; margin-bottom:4px; border-bottom:1px solid #eef2f4;}
.bz-ri{display:grid; place-items:center; width:36px; height:36px; border-radius:9px; background:#0d1b2a; color:#fff; font-size:13px; font-weight:800;}
.bz-rh b{display:block; font-size:15px; color:var(--pc-ink);} .bz-rh small{font-size:12px; color:#62707c;}
.bz-p{display:flex; justify-content:space-between; align-items:center; padding:10px 2px; font-size:13.5px; color:#62707c; border-bottom:1px solid #f4f6f8;}
.bz-p:last-child{border-bottom:0;} .bz-p.on{color:var(--pc-ink); font-weight:600;}
.bz-p i{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#f1f4f6;} .bz-p.on i{background:#dcf2f0;}
.bz-p svg{width:12px; height:12px; fill:none; stroke:#9aa7b2; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;} .bz-p.on svg{stroke:#007a76;}
/* 3: numbers */
.bz-num{max-width:330px;}
.bz-nh{display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid #eef2f4;}
.bz-nh b{font-size:14px; color:var(--pc-ink);}
.bz-auto{display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:8px; box-shadow:inset 0 0 0 1px #e3eaee; font-size:11.5px; font-weight:700; color:var(--pc-ink); white-space:nowrap; transition:background .3s;}
.bz-auto svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
.bz.in .bz-auto{animation:bz-press .5s ease .2s;} @keyframes bz-press{40%{transform:scale(.94); background:#eef6f5;}}
.bz-nr{display:flex; align-items:center; gap:12px; padding:8px 2px; font-size:13.5px;} .bz-nr b{font-weight:600; color:var(--pc-ink);}
.bz-no{display:grid; place-items:center; width:36px; height:28px; border-radius:7px; box-shadow:inset 0 0 0 1px #dfe6ea; font-family:var(--pc-display,Anton),sans-serif; font-size:15px; color:var(--pc-ink);}
.bz-no i{font-style:normal; opacity:0; transform:scale(.6); transition:opacity .3s, transform .4s cubic-bezier(.2,1.4,.4,1);}
.bz.in .bz-no i{opacity:1; transform:none; transition-delay:calc(.7s + var(--k) * .12s);}
.bz.in .bz-no{box-shadow:inset 0 0 0 1px #9fd1ce; transition:box-shadow .3s calc(.7s + var(--k) * .12s);}
/* 4: phone */
.bz-phone{position:relative; width:240px; height:360px; margin-bottom:-90px; padding:8px; border-radius:36px; background:#0d1b2a; box-shadow:0 0 0 1px #2a3a4e, 0 30px 60px -24px rgba(13,27,42,.5); align-self:start; margin-top:10px;}
.bz-isl{position:absolute; left:50%; top:16px; width:70px; height:20px; margin-left:-35px; border-radius:12px; background:#05090f; z-index:1;}
.bz-scr{height:100%; padding:44px 12px 12px; border-radius:29px; background:#f6f8f9;}
.bz-pin{display:flex; align-items:center; gap:7px; padding:9px 10px; border-radius:10px; background:#eef2f4; font-size:11.5px; color:#62707c;}
.bz-pin svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
.bz-pc{display:flex; flex-direction:column; gap:10px; margin-top:8px; padding:12px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px #e6ecef;}
.bz-pc b{display:block; font-size:13px; color:var(--pc-ink);} .bz-pc small{font-size:11px; color:#62707c;}
.bz-pc > i{display:block; padding:10px; border-radius:10px; background:#007a76; color:#fff; font-style:normal; font-size:13px; font-weight:700; text-align:center;}
.bz-pc.in > i{background:#e7f6ee; color:#127c4c; box-shadow:inset 0 0 0 1px #bfe6cf;}
.b4 .bz-art{align-items:start; padding-bottom:0;}
@media (prefers-reduced-motion:reduce){ .bz *{transition:none !important; animation:none !important;} .bz-q i,.bz-rr,.bz-no i{opacity:1; transform:none;} }
@media (max-width:1000px){ .b1,.b2,.b3,.b4{grid-column:span 6;} }
@media (max-width:700px){ .bz-grid{grid-template-columns:1fr; gap:24px;} .b1,.b2,.b3,.b4{grid-column:auto;} .bz-art{height:auto; min-height:280px; padding:20px 14px;} .b4 .bz-art{height:300px;} }
/* each tile its own backdrop (Mehul 2026-10-20: the page repeated one look) */
.bz-art::after{display:none !important;}
/* 1 search: a dark tile, a soft teal spotlight under the card */
.b1 .bz-art{background:radial-gradient(60% 70% at 50% 60%, rgba(20,163,155,.45), transparent 70%), #0d1b2a; box-shadow:none;}
/* 2 role: a clean two-tone split, lavender meets white on a diagonal */
.b2 .bz-art{background:linear-gradient(135deg, #e4e2fb 0%, #e4e2fb 50%, #ffffff 50%, #ffffff 100%); box-shadow:inset 0 0 0 1px #e6e4f5;}
/* 3 numbers: warm paper with a giant jersey number behind */
.b3 .bz-art{background:#fbf3e6; box-shadow:inset 0 0 0 1px #f0e4cf;}
.bz-big{position:absolute; z-index:-1; right:-14px; bottom:-60px; font-family:var(--pc-display,Anton),sans-serif; font-size:300px; line-height:1; color:transparent; -webkit-text-stroke:2px #edd9b5;}
/* 4 phone: vivid brand teal into field green */
.b4 .bz-art{background:linear-gradient(150deg,#0e8f88 0%,#14a39b 40%,#3fae72 100%); box-shadow:none;}
.b4 .bz-phone{box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 40px 70px -24px rgba(0,40,30,.6);}
.b1 .bz-art{background:radial-gradient(55% 75% at 50% 85%, rgba(20,163,155,.75), rgba(20,163,155,.15) 55%, transparent 75%), radial-gradient(40% 50% at 90% 0%, rgba(124,140,240,.35), transparent 70%), #0d1b2a;}
.b3 .bz-art{justify-items:end; padding-right:40px;}
.bz-big{left:22px; right:auto; top:50%; bottom:auto; transform:translateY(-50%); font-size:260px; -webkit-text-stroke:2.5px #e6cfa5;}
@media (max-width:700px){ .b3 .bz-art{justify-items:center; padding-right:14px;} .bz-big{font-size:200px; left:auto; right:-10px;} }
/* 1: the silk stage from the Scheduler's steps; 4: a ballfield drawn in chalk on the green, the phone standing on the infield */
.b1 .bz-art{background:linear-gradient(125deg,#fff4dc 0%,#bfeee4 24%,#2fb3a6 50%,#0d7f80 70%,#103e63 100%) !important;}
.b1 .bzs-art{position:absolute; inset:0; z-index:-1; width:100%; height:100%;}
.b1 .bzs-silk path{fill:none; stroke:url(#bzs-g1); stroke-width:1.1; vector-effect:non-scaling-stroke;} .b1 .bzs-silk.b path{stroke:url(#bzs-g2);}
@media (prefers-reduced-motion:no-preference){ .b1 .bzs-silk.a{animation:sx-silk 26s ease-in-out infinite alternate;} .b1 .bzs-silk.b{animation:sx-silk 32s ease-in-out infinite alternate-reverse;} }
.b4 .bz-art{background:linear-gradient(180deg,#0b4a3c 0%,#13684d 55%,#1c7d57 100%) !important;}
.bzf{position:absolute; inset:0; z-index:-1; width:100%; height:100%;}
.bzf .g{fill:#2a9361; opacity:.55;} .bzf .dt{fill:#c99a6a; opacity:.55;} .bzf .ig{fill:#2f9a66; opacity:.8;}
.bzf .ln{fill:none; stroke:#fff; stroke-opacity:.8; stroke-width:1.4; vector-effect:non-scaling-stroke;} .bzf .ln.w{stroke-opacity:.35; stroke-width:6;}
.bzf .md{fill:#d8b48a; opacity:.8;}
.b4 .bz-art::before{content:""; position:absolute; z-index:-1; left:50%; top:-30%; width:120%; height:90%; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(255,255,230,.32), transparent); pointer-events:none;}
.bzf .bs{fill:#fff;} .bzf .g{opacity:.6;}

/* ---- ready before the first camper arrives (Mehul 2026-10-20: improve it): one white frame in three columns, the
   Scheduler's "whole camp" layout. Each picture on its own surface: the files on cool grey, the waiver on paper, the
   family lookup on a soft mint glow. Captions in Stripe's style under hairlines. ---- */
.rb{background:#fff;}
.rb-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:40px; border-radius:16px; overflow:hidden; box-shadow:0 0 0 1px #e6ecef;}
.rb-c{border-right:1px solid #e6ecef;} .rb-c:last-child{border-right:0;}
.rb-art{position:relative; height:330px; display:grid; place-items:center; padding:26px; overflow:hidden;}
.rb1 .rb-art{background:linear-gradient(180deg,#f3f6f9,#eaf0f4);}
.rb2 .rb-art{background:#faf4ea;}
.rb3 .rb-art{background:radial-gradient(70% 70% at 50% 40%, #ffffff 0%, #e2f4f1 100%);}
.rb-t{padding:22px 26px 28px; border-top:1px solid #eef2f4;}
.rb-t span{display:block; margin-bottom:8px; font-size:12px; font-weight:500; color:#62707c;}
.rb-t p{margin:0; font-size:16px; line-height:1.55; color:#62707c;} .rb-t p b{font-weight:600; color:var(--pc-ink);}
/* 1: files */
.rb-files{display:grid; gap:10px; width:100%; max-width:300px;}
.rb-f{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px #e3eaee, 0 14px 26px -20px rgba(13,27,42,.4);
  opacity:0; transform:translateX(-16px); transition:opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--k) * .15s);}
.rb-ft{display:grid; place-items:center; flex:none; width:38px; height:44px; border-radius:6px; font-size:10px; font-weight:800; color:#fff;}
.xl .rb-ft{background:#1f7a45;} .pdf .rb-ft{background:#c0344d;} .csv .rb-ft{background:#41505d;}
.rb-f span:nth-child(2){flex:1; min-width:0;} .rb-f b{display:block; font-size:13.5px; color:var(--pc-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .rb-f small{font-size:11.5px; color:#62707c;}
.rb-f i{display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#eef6f5;}
.rb-f i svg, .rb-all svg{width:15px; height:15px; fill:none; stroke:#007a76; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
/* 2: waiver */
.rb-doc{position:relative; width:220px; padding:18px 18px 16px; border-radius:6px; background:#fff; box-shadow:0 0 0 1px #ebe2cf, 0 20px 34px -22px rgba(80,50,10,.45); transform:rotate(-2deg);}
.rb-dh{padding-bottom:10px; margin-bottom:10px; border-bottom:2px solid #0d1b2a;} .rb-dh b{display:block; font-size:13px; color:var(--pc-ink);} .rb-dh small{font-size:10.5px; color:#62707c;}
.rb-l{display:block; height:5px; margin:7px 0; border-radius:3px; background:#eae4d8;} .w9{width:92%;} .w7{width:72%;} .w8{width:84%;} .w5{width:55%;}
.rb-sig{margin-top:16px; padding-top:6px; border-top:1px dashed #d9cfbd;}
.rb-sign{display:block; font-family:Caveat,'Bradley Hand',cursive; font-size:24px; line-height:1; color:#1d3d8f; clip-path:inset(0 100% 0 0); transition:clip-path 1.2s ease .3s;}
.rb-sig small{font-size:10px; color:#62707c;}
.rb-ok{position:absolute; right:-14px; top:-12px; display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:99px; background:#13804f; color:#fff; font-style:normal; font-size:11.5px; font-weight:700;
  box-shadow:0 8px 16px -8px rgba(19,128,79,.7); opacity:0; transform:scale(.6) rotate(6deg); transition:opacity .3s 1.4s, transform .5s cubic-bezier(.2,1.4,.4,1) 1.4s;}
.rb-ok svg{width:12px; height:12px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.rb-all{position:absolute; right:18px; bottom:18px; display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px #ebe2cf, 0 12px 24px -16px rgba(80,50,10,.4);}
.rb-all b{display:block; font-size:12.5px; color:var(--pc-ink);} .rb-all small{font-size:11px; color:#62707c;}
/* 3: lookup */
.rb-look{width:100%; max-width:280px; padding:18px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px #dbeeea, 0 18px 34px -22px rgba(0,80,76,.4);}
.rb-lt{display:block; font-size:15px; color:var(--pc-ink);} .rb-look > small{font-size:11.5px; color:#62707c;}
.rb-code{display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin:12px 0 14px;}
.rb-code i{display:grid; place-items:center; height:36px; border-radius:8px; box-shadow:inset 0 0 0 1px #dfe6ea; font-style:normal; font-family:var(--pc-display,Anton),sans-serif; font-size:18px; color:transparent;
  transition:color .2s, box-shadow .2s; transition-delay:calc(.3s + var(--k) * .15s);}
.rb-res{display:grid; gap:7px; opacity:0; transform:translateY(8px); transition:opacity .4s 1.4s, transform .5s 1.4s;}
.rb-res div{display:flex; justify-content:space-between; gap:10px; font-size:11.5px;} .rb-res small{color:#62707c;} .rb-res b{font-weight:600; color:var(--pc-ink); text-align:right;}
.rb-rc b{color:#127c4c;}
/* seen */
.rb.in .rb-f{opacity:1; transform:none;}
.rb.in .rb-sign{clip-path:inset(0 0 0 0);} .rb.in .rb-ok{opacity:1; transform:none;}
.rb.in .rb-code i{color:var(--pc-ink); box-shadow:inset 0 0 0 1.5px #007a76;}
.rb.in .rb-res{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .rb *{transition:none !important;} }
@media (max-width:1000px){ .rb-grid{grid-template-columns:1fr;} .rb-c{border-right:0; border-bottom:1px solid #e6ecef;} .rb-c:last-child{border-bottom:0;} .rb-art{height:300px;} }
/* the two white sections run on: one normal gap between them, not two */ .pc-sec.bz{padding-bottom:56px;} .pc-sec.rb{padding-top:56px;} @media (max-width:700px){ .pc-sec.bz{padding-bottom:36px;} .pc-sec.rb{padding-top:36px;} }

/* ==== 2026-10-20 de-duplication (Mehul: no repeated washes or stages on this page) ==== */
.pc-sec.cw{background:#fff;} .pc-sec.dd{background:#f6f9fc;} .pc-sec.mv{background:#fff;} .pc-sec.bz{background:#f6f9fc; padding-bottom:clamp(72px,9vw,128px);} .pc-sec.rb{background:#fff; padding-top:clamp(72px,9vw,128px);}
/* how check-in works: tabs across the top; an arrivals ruler beside the card */
.cw-stage{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); grid-template-areas:"rail rail" "meter card"; gap:44px clamp(32px,5vw,72px); padding:0; border-radius:0; background:none; box-shadow:none; overflow:visible; margin-top:48px;}
.cw-rail{grid-area:rail; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; padding:0; border-radius:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-top:1px solid #e3e8ee;}
.cw-s{grid-template-columns:1fr; padding:18px 0 0;}
.cw-s::before{display:none;}
.cw-k{display:none;}
.cw-t{position:relative;}
.cw-prog{position:absolute; left:0; right:0; top:-19px; height:2px; margin:0; background:transparent; opacity:1; border-radius:0;}
.cw-s.past .cw-prog i{width:100%; animation:none;}
.cw-s.on .cw-prog i{animation:cw-fill 3.2s linear forwards;}
.cw-t p{max-height:none; opacity:1; margin-top:6px; color:#62707c; transition:color .4s;}
.cw-s.on .cw-t p{color:#56677a;}
.cw-meter{grid-area:meter; align-self:center;}
.cw-card{grid-area:card;}
.cw-ml{display:block; font-size:13px; color:#62707c;}
.cw-big{display:flex; align-items:baseline; gap:10px; margin:6px 0 22px;}
.cw-big b{font-size:clamp(64px,8vw,104px); font-weight:300; line-height:1; letter-spacing:-.04em; color:#0b1a24; font-variant-numeric:tabular-nums;}
.cw-big span{font-size:clamp(20px,2vw,26px); font-weight:300; color:#62707c;}
@property --cwp{syntax:'<percentage>'; inherits:true; initial-value:0%;}
.cw-ruler{--cwp:0%; position:relative; height:46px; transition:--cwp 1s cubic-bezier(.3,.7,.2,1);}
.cw-ruler i{position:absolute; inset:0; background:linear-gradient(90deg,#007a76 var(--cwp), #d3dbe2 var(--cwp));
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 1.4px,transparent 1.4px 4.6px); mask:repeating-linear-gradient(90deg,#000 0 1.4px,transparent 1.4px 4.6px);}
.cw-ruler::after{content:""; position:absolute; top:-6px; bottom:-6px; left:var(--cwp); width:2px; margin-left:-1px; background:#0b1a24; border-radius:2px; opacity:.85;}
.cw-leg{display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:0 28px; margin-top:22px; padding-top:16px; border-top:1px solid #eef1f4;}
.cw-leg small{display:block; font-size:12px; color:#62707c;} .cw-leg b{display:block; margin-top:2px; font-size:18px; font-weight:500; color:#0b1a24; font-variant-numeric:tabular-nums;}
.cw-card{box-shadow:0 0 0 1px rgba(13,27,42,.07), 0 30px 60px -32px rgba(13,27,42,.3);}
@media (max-width:1000px){ .cw-stage{grid-template-columns:minmax(0,1fr); grid-template-areas:"rail" "meter" "card"; gap:32px; padding:0;} }
@media (max-width:700px){
  .cw-rail{grid-template-columns:minmax(0,1fr); border-top:0;} .cw-s{padding:14px 0 14px; border-top:1px solid #e3e8ee;} .cw-prog{top:-15px;}
  .cw-s:not(.on) .cw-t p{display:none;} .cw-stage{padding:0 !important;}
}
/* who they are: no wash; the roster runs off the edge and dims when the sheet opens, like the product */
.dd-stage{background:transparent; box-shadow:none; overflow:visible;}
.dd-stage::before{display:none;}
.dd-roster{left:0; top:20px; bottom:20px; width:66%; box-shadow:0 0 0 1px #e3e8ee, 0 20px 40px -30px rgba(13,27,42,.25); overflow:hidden;}
.dd-roster::after{content:""; position:absolute; inset:0; background:#0b1a24; opacity:0; transition:opacity .6s ease; pointer-events:none;}
.dd-stage.in .dd-roster::after{opacity:.16;}
.dd-drawer{right:0; top:0; bottom:0; width:56%; box-shadow:0 0 0 1px rgba(13,27,42,.06), -24px 30px 60px -20px rgba(13,27,42,.32);}
@media (max-width:560px){ .dd-roster{left:0; right:0;} .dd-drawer{left:24px; right:0;} }
/* plans change: two sessions; Jonah moves from one to the other and the email lands */
.mv2{position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(40px,7vw,120px); margin-top:52px; padding-bottom:70px;}
.mv2-col{padding:18px 20px 22px; border:1px solid #e3e8ee; border-radius:14px; background:#fff;}
.mv2-h{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid #eef1f4;}
.mv2-h b{display:block; font-size:15px; font-weight:600; color:#0b1a24;} .mv2-h small{display:block; font-size:12px; color:#62707c;}
.mv2-h em{font-style:normal; font-size:12.5px; color:#62707c; white-space:nowrap;} .mv2-h em b{display:inline; font-size:15px; color:#0b1a24; font-variant-numeric:tabular-nums;}
.mv2-chips{display:flex; flex-wrap:wrap; gap:8px;}
.mv2-c{display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 5px; border-radius:100px; background:#f3f6f9; font-size:12.5px; font-weight:500; color:#2c3a46; white-space:nowrap; transition:opacity .4s ease, background-color .4s ease, box-shadow .4s ease;}
.mv2-c i{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#fff; font-style:normal; font-size:9px; font-weight:700; color:#56677a;}
.mv2-more{align-self:center; padding:0 6px; font-size:12px; color:#62707c;}
.mv2-c.j{background:#e6f2f1; color:#00605d; box-shadow:inset 0 0 0 1px #bfe0dd;} .mv2-c.j i{background:#007a76; color:#fff;}
[data-j="to"]{opacity:0;}
.mv2.lift [data-j="from"]{opacity:.18;} .mv2.land [data-j="to"]{opacity:1;}
.mv2.pick [data-j="from"]{box-shadow:inset 0 0 0 1px #007a76, 0 0 0 4px rgba(0,122,118,.12);}
.mv2-fly{position:absolute; left:0; top:0; z-index:3; opacity:0; pointer-events:none;}
.mv2-fly>.mv2-c{box-shadow:inset 0 0 0 1px #007a76, 0 14px 28px -10px rgba(0,96,93,.45);}
.mv2-mail{position:absolute; right:-10px; bottom:0; z-index:2; width:min(330px,70%); padding:14px 16px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.07), 0 28px 50px -22px rgba(13,27,42,.35);
  opacity:0; transform:translateY(16px); transition:opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1);}
.mv2.mail .mv2-mail{opacity:1; transform:none;}
.mv2-mh{display:flex; align-items:center; gap:10px; padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid #eef1f4;}
.mv2-mh .ic{display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#0b1a24; color:#fff; font-size:10px; font-weight:700;}
.mv2-mh b{display:block; font-size:12.5px; color:#0b1a24;} .mv2-mh small{display:block; font-size:11px; color:#62707c;}
.mv2-subj{display:block; font-size:13px; font-weight:600; color:#0b1a24;} .mv2-mail p{margin:4px 0 0; font-size:12px; line-height:1.5; color:#56677a;}
.mv2-pts{list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px;}
.mv2-pts li{position:relative; padding-left:16px; font-size:14.5px; line-height:1.55; color:#62707c;}
.mv2-pts li::before{content:""; position:absolute; left:0; top:4px; height:17px; width:1px; background:#007a76;}
.mv2-pts b{color:#0b1a24; font-weight:600;}
@media (max-width:900px){ .mv2{grid-template-columns:minmax(0,1fr); gap:56px; padding-bottom:110px;} .mv2-pts{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .mv2-col{padding:14px 14px 16px;} .mv2-mail{right:0; width:88%;} .mv2-pts{grid-template-columns:minmax(0,1fr); gap:18px;} }
.dd-stage.in .dd-roster::after{opacity:.06;}
.mv2{gap:48px; padding-bottom:120px;}
.mv2-mail{right:auto; left:50%; bottom:0; width:min(360px,80%); transform:translate(-50%,16px);} .mv2.mail .mv2-mail{transform:translate(-50%,0);}
@media (max-width:900px){ .mv2{gap:28px; padding-bottom:150px;} }
@media (max-width:560px){ .dd-stage{height:560px;} .dd-roster{left:0; right:auto; width:72%; top:0; bottom:auto; height:330px;} .dd-drawer{width:auto; left:28px; right:0; top:96px; bottom:0; padding:16px;} }
@media (max-width:560px){ .dd-stage{height:500px;} }

/* ==== phone card, sport-neutral (Mehul 2026-10-20: we serve every sport, no one field): a night sky with two floodlight
   beams sweeping slowly from the top corners and a soft glow on the ground under the phone ==== */
.b4 .bz-art{background:radial-gradient(60% 55% at 50% 0%, rgba(95,212,207,.22), transparent 70%), linear-gradient(180deg,#0a1d2a 0%,#0c3440 58%,#0e4a4c 100%) !important;}
.b4 .bz-art::before{background:radial-gradient(closest-side, rgba(200,255,248,.18), transparent) !important;}
.bzl{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;}
.bzl i{position:absolute; top:-12%; width:58%; height:150%; transform-origin:50% 0; filter:blur(10px); mix-blend-mode:screen;
  background:linear-gradient(180deg, rgba(225,255,250,.42), rgba(160,240,232,.14) 45%, rgba(160,240,232,0) 80%);
  clip-path:polygon(47% 0, 53% 0, 100% 100%, 0 100%);}
.bzl .l{left:-14%; transform:rotate(-34deg);} .bzl .r{right:-14%; transform:rotate(34deg);}
.bzl .fl{top:auto; bottom:-30%; left:15%; width:70%; height:60%; transform:none; clip-path:none; filter:blur(30px); border-radius:50%;
  background:radial-gradient(closest-side, rgba(95,212,207,.35), transparent);}
@media (prefers-reduced-motion:no-preference){ .bzl .l{animation:bzl-l 9s ease-in-out infinite alternate;} .bzl .r{animation:bzl-r 11s ease-in-out infinite alternate;} }
@keyframes bzl-l{from{transform:rotate(-38deg);} to{transform:rotate(-26deg);}}
@keyframes bzl-r{from{transform:rotate(38deg);} to{transform:rotate(26deg);}}

/* ==== plans change, with colour (Mehul 2026-10-20: it looked bland): the morning session warm like sunrise, the
   afternoon cool teal, Jonah's chip carrying the teal across, the email edged in both, soft washes behind ==== */
.pc-sec.mv{position:relative; isolation:isolate; overflow:hidden;
  background:radial-gradient(40% 55% at 12% 55%, rgba(255,190,120,.16), transparent 70%), radial-gradient(40% 55% at 88% 50%, rgba(20,163,155,.14), transparent 70%), #fff !important;}
.mv2-col{position:relative; overflow:hidden; border:0 !important; box-shadow:0 0 0 1px var(--mb), 0 24px 48px -32px var(--ms);}
.mv2-col::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--mg);}
.mv2-col.a{--mb:#f3dcc0; --ms:rgba(190,110,20,.35); --mg:linear-gradient(90deg,#f6b26b,#f28c6a); background:linear-gradient(180deg,#fff6ec 0%,#fff 55%);}
.mv2-col.b{--mb:#c6e6e3; --ms:rgba(0,110,105,.35); --mg:linear-gradient(90deg,#14a39b,#2a7fd4); background:linear-gradient(180deg,#ecf7f6 0%,#fff 55%);}
.mv2-col .mv2-h{border-bottom-color:var(--mb);}
.mv2-col .mv2-h small{display:inline-block; margin-top:4px; padding:2px 8px; border-radius:20px; font-size:11.5px; font-weight:500;}
.mv2-col.a .mv2-h small{background:#fde8d2; color:#a8541a;} .mv2-col.b .mv2-h small{background:#d9f0ee; color:#00605d;}
.mv2-col.a .mv2-h em b{color:#b4610e;} .mv2-col.b .mv2-h em b{color:#00726f;}
.mv2-col.a .mv2-c:not(.j){background:#fff; box-shadow:inset 0 0 0 1px #f3e2cd;} .mv2-col.a .mv2-c:not(.j) i{background:#fdeedd; color:#a8541a;}
.mv2-col.b .mv2-c:not(.j){background:#fff; box-shadow:inset 0 0 0 1px #d3ebe8;} .mv2-col.b .mv2-c:not(.j) i{background:#e2f4f2; color:#00726f;}
.mv2-c.j{background:linear-gradient(90deg,#d9f3f0,#dfeafc) !important; color:#00504d !important; box-shadow:inset 0 0 0 1px #9fd6d1 !important;}
.mv2-c.j i{background:linear-gradient(135deg,#007a76,#2a7fd4) !important;}
.mv2-fly>.mv2-c{box-shadow:inset 0 0 0 1px #6cc6bf, 0 16px 30px -10px rgba(42,127,212,.45) !important;}
.mv2-mail{border-top:0; overflow:hidden;}
.mv2-mail::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,#f6b26b,#14a39b,#2a7fd4);}
.mv2-mail{position:absolute;}
.mv2-mh .ic{background:linear-gradient(135deg,#007a76,#2a7fd4) !important;}
.mv2-pts li:nth-child(1)::before{background:#f28c6a;} .mv2-pts li:nth-child(2)::before{background:#e0a23a;} .mv2-pts li:nth-child(3)::before{background:#14a39b;} .mv2-pts li:nth-child(4)::before{background:#2a7fd4;}

/* jersey numbers card (Mehul 2026-10-22): no peach jersey theme; the card sits centred on a calm neutral with a faint teal glow */
.b3 .bz-art{background:radial-gradient(60% 70% at 80% 20%, rgba(95,216,212,.18), transparent 70%), #f4f8f9 !important; box-shadow:inset 0 0 0 1px #e6edf0 !important; justify-items:center !important; padding-right:0 !important;}
.b3 .bz-art::after{display:none !important;}
.bz-big{display:none !important;}

.b4 .bzl{display:none !important;} /* the stadium light beams went with the dark stage */

/* the four check-in tiles, each from a motif already on this page (Mehul 2026-10-23: "all 4 different, matching the page"):
   1 search: the silk lines (kept)
   2 volunteer role: the hero's diagonal teal band, crisp-edged, crossing a pale field
   3 jersey numbers: the check-in tick meter from "Pick the session", rows of thin ticks, the first part filled teal
   4 phone: the page's faint vertical guides with a soft teal rising from the bottom, like the camper chips section */
.b2 .bz-art, .b3 .bz-art, .b4 .bz-art{background:#f4f8f9 !important; box-shadow:inset 0 0 0 1px #e6edf0 !important; isolation:isolate;}
.b2 .bz-art::before, .b3 .bz-art::before, .b4 .bz-art::before{display:block !important; content:"" !important; position:absolute; inset:0; z-index:-1; pointer-events:none; transform:none; width:auto; height:auto; left:0; top:0; border-radius:0; filter:none; opacity:1;}
.b2 .bz-art::before{background:linear-gradient(90deg,#b9d3d6 0%,#5fb1ad 22%,#0f8f88 48%,#2fbfb4 70%,#8fe3dc 100%);
  clip-path:polygon(0 78%, 100% 30%, 100% 62%, 0 100%);}
.b3 .bz-art::before{left:6%; right:6%; top:auto; bottom:14%; height:34%; inset:auto 6% 14% 6%;
  background:repeating-linear-gradient(90deg, #007a76 0 2px, transparent 2px 10px) 0 0/62% 100% no-repeat,
             repeating-linear-gradient(90deg, #cfd9de 0 2px, transparent 2px 10px);}
.b3 .bz-art::after{display:block !important; content:"" !important; position:absolute; z-index:-1; left:6%; right:6%; bottom:calc(14% - 14px); height:1px; background:#d5dde3; inset:auto 6% calc(14% - 14px) 6%; filter:none; opacity:1; transform:none; animation:none;}
.b4 .bz-art::before{background:linear-gradient(0deg, rgba(47,179,166,.55) 0%, rgba(47,179,166,.18) 38%, rgba(47,179,166,0) 70%),
  repeating-linear-gradient(90deg, rgba(13,27,42,.07) 0 1px, transparent 1px 20%);}
.b4 .bz-art::before{background:linear-gradient(0deg, rgba(47,179,166,.5) 0%, rgba(47,179,166,.16) 40%, rgba(47,179,166,0) 72%),
  repeating-linear-gradient(90deg, rgba(13,27,42,.07) 0 1px, transparent 1px 16.66%) !important;}
.b3 .bz-art::before{inset:auto 0 18% 0 !important; height:40%; left:0; right:0;
  background:repeating-linear-gradient(90deg, #2fb3a6 0 1.5px, transparent 1.5px 9px) 0 0/58% 100% no-repeat,
             repeating-linear-gradient(90deg, #d5dde3 0 1.5px, transparent 1.5px 9px) !important;}
.b3 .bz-art::after{inset:auto 0 calc(18% - 12px) 0 !important;}

/* the product is the picture (Mehul 2026-10-23: small UI on big backgrounds lost the focus): each screen is drawn larger so
   it fills most of its tile, set near the top and cropped at the bottom edge like a screen running on, leaving only a
   frame of background around it */
@media (min-width:701px){
  .bz-art{place-items:start center !important; align-items:start !important; padding:26px 26px 0 !important;}
  .b1 .bz-card{zoom:1.38;} .b2 .bz-card{zoom:1.42;} .b3 .bz-card{zoom:1.4;} .b4 .bz-phone{zoom:1.28; margin-bottom:0;}
  .bz-card{box-shadow:0 0 0 1px rgba(50,50,93,.07), 0 24px 48px -18px rgba(13,40,60,.3) !important;}
}
/* jersey numbers tile, round 2 (Mehul 2026-10-23: the tick meter did not work): two crisp quarter circles from the bottom
   right corner, brand teal inside a pale aqua ring, like the corner of a field; no ticks, no glow */
.b3 .bz-art::before{inset:0 !important; height:auto !important;
  background:radial-gradient(circle at 100% 100%, #2fb3a6 0, #0f8f88 34%, transparent calc(34% + 1px)),
             radial-gradient(circle at 100% 100%, #cdeee9 0, #e6f6f3 52%, transparent calc(52% + 1px)) !important;}
.b3 .bz-art::after{display:none !important;}
.b3 .bz-art::before{background:radial-gradient(circle at 0% 100%, #2fb3a6 0, #0f8f88 44%, transparent calc(44% + 1px)),
             radial-gradient(circle at 0% 100%, #cdeee9 0, #e6f6f3 66%, transparent calc(66% + 1px)) !important;}

/* waiver panel, round 2 (Mehul 2026-10-23: cream panel and the script-font signature looked AI): the same neutral as the
   panels beside it, a straight page with real waiver lines and fields instead of grey bars, and a signature drawn as one
   pen stroke in ink */
.rb2 .rb-art{background:#f3f6f9 !important;}
.rb-doc2{transform:none !important; width:min(330px,86%); padding:18px 20px 16px !important; border-radius:6px !important; background:#fff;
  box-shadow:0 0 0 1px rgba(50,50,93,.07), 0 24px 44px -20px rgba(13,40,60,.3) !important;}
.rb-doc2 .rb-dh{padding-bottom:10px; border-bottom:1px solid #eef1f4;}
.rb-doc2 .rb-dh b{font-size:14px;} .rb-doc2 .rb-dh small{font-size:10.5px;}
.rb-tx{margin:10px 0 0; font-size:9.5px; line-height:1.55; color:#56677a;}
.rb-fd{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:12px 0 0;}
.rb-fd dt{font-size:8.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#62707c;}
.rb-fd dd{margin:2px 0 0; font-size:11.5px; font-weight:600; color:#0b1a24;}
.rb-sigbox{position:relative; margin-top:12px; padding-top:2px;}
.rb-sigsvg{display:block; width:72%; height:auto;}
.rb-sigsvg path{fill:none; stroke:#1f3a68; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.rb-sigsvg path.u{stroke-width:1.3; opacity:.7;}
.rb-sline{display:block; height:1px; margin-top:-4px; background:#c3ccd3;}
.rb-sigbox small{display:block; margin-top:4px; font-size:9px; color:#62707c;}
@media (prefers-reduced-motion:no-preference){
  .rb-sigsvg path{stroke-dasharray:600; stroke-dashoffset:600; transition:stroke-dashoffset 1.6s ease .4s;}
  .rb-sigsvg path.u{transition-delay:1.8s; transition-duration:.6s;}
  .rb.in .rb-sigsvg path, .rb-grid.in .rb-sigsvg path, .in .rb-sigsvg path{stroke-dashoffset:0;}
}
.rb2 .rb-all{transform:translateY(30px);} .rb-sigsvg{width:60%;}
/* hero check-in window on phones (2026-10-28): it sat 8% right of the text and was cut at the right edge, and the
   "Check in" buttons wrapped to two lines. Full width, four columns that fit (#, athlete, check-in, class), one-line buttons. */
@media (max-width:640px){
  .pc-hero-art.cdx{padding-left:0 !important; padding-right:0 !important;}
  .cdx .cih .ci-r,.cdx .cih .ci-hd{grid-template-columns:20px minmax(0,1fr) max-content 34px !important; gap:8px !important;}
  .cdx .cih .ci-r > :nth-child(n+5),.cdx .cih .ci-hd > :nth-child(n+5){display:none !important;}
  .cdx .ci-btn{white-space:nowrap; padding:0 8px; min-width:62px;}
  .cdx .ci-btn i{white-space:nowrap;}
}
/* "Pick the session" filter pills (2026-10-28): the count dropped under the label and the pills turned into tall
   ovals on phones. Each pill stays on one line, with the count as a small badge, like the app. */
.cw-pills{flex-wrap:nowrap;}
.cw-pills span{display:inline-flex; align-items:center; gap:6px; flex:none; white-space:nowrap;}
.cw-pills em{margin-left:0; padding:1px 6px; border-radius:99px; background:#eef2f4; color:#41505d; font-size:10.5px; font-weight:700; opacity:1;}
.cw-pills span.on em{background:rgba(255,255,255,.18); color:#fff;}
@media (max-width:640px){ .cw-pills{gap:5px;} .cw-pills span{padding:6px 10px; font-size:11.5px;} }
@media (max-width:380px){ .cw-pills{gap:4px;} .cw-pills span{padding:6px 8px; font-size:11px; gap:4px;} .cw-pills em{padding:1px 5px;} }
@media (max-width:340px){ .cw-pills{flex-wrap:wrap;} }
/* "Pick the session. Tap as they arrive." on phones (2026-10-28): three stacked steps put the screen half a page
   below. The steps are one row of three, the live step's line under it, then the counter and the screen. */
.cw-cap{display:none;}
@media (max-width:640px){
  .cw-rail{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:0 10px !important;}
  .cw-s{padding:14px 0 0 !important; border-top:0 !important;}
  .cw-k{font-size:11px;}
  .cw-t b{font-size:12.5px !important; line-height:1.3;}
  .cw-t p,.cw-s.on .cw-t p{display:none !important;}
  .cw-prog{position:static !important; margin-top:8px !important; top:auto !important;}
  .cw-cap{display:block; grid-column:1 / -1; min-height:4.5em; margin:10px 0 6px; font-size:14px; line-height:1.5; color:#56677a;}
}
@media (max-width:640px){
  .cw-stage{grid-template-areas:"rail" "cap" "meter" "card" !important; gap:14px !important;}
  .cw-cap{grid-area:cap; margin:0;}
}
@media (max-width:640px){
  .cw-big{margin:2px 0 10px;} .cw-big b{font-size:46px;} .cw-big span{font-size:18px;}
  .cw-ruler{height:22px;}
  .cw-leg{margin-top:12px; padding-top:10px;} .cw-leg b{font-size:16px;}
  .cw-card{height:486px !important;}
}

/* the detail drawer mock pokes 2px past a 768px screen; the section clips it so the page never scrolls sideways */
.pc-sec.dd{overflow-x:clip;}