/* =====================================================================
   WEBSITE & REGISTRATION (SC-534): the showcase sections on
   /products/website-and-registration/, ported from Luke's vision file
   (SM_UI_Mockup marketing branch: website-showcase, registration-hero and
   registration-showcase) and corrected to what the product does.
   Loaded after page-category.css. Motion: scripts/page-website-registration.js.
   Every drawing here is aria-hidden; the copy beside it says what it shows.
   ===================================================================== */
.ws-section,.rs,.pc-hero-reg{--sc-teal:#00BCB7; --sc-teal-ink:#00726f; --sc-mint:#eefaf8; --sc-navy:#0b1a24; --sc-line:#e1e7eb; --sc-muted:#5b6b78;}
.ws-section{--sc-teal:#00BCB7; --sc-teal-ink:#00726f; --sc-mint:#eefaf8; --sc-navy:#0b1a24; --sc-line:#e1e7eb; --sc-muted:#5b6b78;
    --ws-green:#1f9d57; --ws-green-bg:#e7f6ee;
    background:#f6f9fa; padding:clamp(64px,8vw,104px) 0; color:var(--sc-navy); overflow:hidden;}
  /* Faint guide lines down the sides of the content, like a layout grid. */
  .ws-section .pc-wrap{position:relative;}
  .ws-section .pc-wrap::before,.ws-section .pc-wrap::after{content:""; position:absolute; top:-200px; bottom:-200px; width:1px; background:var(--sc-line); pointer-events:none;}
  /* Like Stripe's, the guide lines run just outside the cards. */
  .ws-section .pc-wrap::before{left:calc(var(--pc-gutter,24px) - 18px);}
  .ws-section .pc-wrap::after{right:calc(var(--pc-gutter,24px) - 18px);}

  .ws-head{max-width:900px; margin-bottom:44px;}
  .ws-head .pc-sh{max-width:30em;}

  /* ---- grid + cards ---- */
  .ws-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
  .ws-card{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--sc-line); border-radius:6px;
    overflow:hidden; box-shadow:0 1px 2px rgba(11,26,36,.04);
    transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;}
  .ws-card:hover{box-shadow:0 18px 40px rgba(11,26,36,.08);}
  /* Like Stripe's cards: the card you point at grows a little and lifts above the others. */
  @media (hover:hover) and (prefers-reduced-motion:no-preference){
    .ws-card:hover{z-index:3; transform:scale(1.025); box-shadow:0 30px 60px rgba(11,26,36,.16);}
    .ws-hosted:hover{transform:scale(1.012);}
  }
  .ws-photos{grid-column:span 2;}
  .ws-hosted{grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);}
  .ws-copy{position:relative; z-index:2; padding:28px 28px 0;}
  .ws-copy h3{font-size:clamp(20px,1.8vw,24px); line-height:1.2; font-weight:700; letter-spacing:-.015em; max-width:22ch;}
  .ws-copy p{font-size:15px; line-height:1.6; color:var(--sc-muted); margin-top:8px; max-width:46ch;}
  .ws-stage{position:relative; flex:1; min-height:300px; margin-top:20px;}
  .ws-photos .ws-stage{min-height:460px;}
  .ws-words .ws-stage{min-height:420px;}

  /* Teal washes behind each stage */
  .ws-stage::before{content:""; position:absolute; inset:0; pointer-events:none;}
  /* Photos: a teal swoosh rising from the bottom left to the top right, behind the site. */
  .ws-photos .ws-stage{overflow:hidden;}
  .ws-photos .ws-stage::before{display:none;}
  .ws-swoosh{position:absolute; left:0; right:0; bottom:0; width:100%; height:100%; pointer-events:none;}
  /* Words: white at the top fading to teal at the bottom. */
  .ws-words{background:linear-gradient(180deg, #fff 0%, #fff 34%, #d8f4f2 58%, #63d6d1 82%, #12a7a2 100%);}
  .ws-words .ws-stage::before{background:radial-gradient(70% 40% at 50% 62%, rgba(255,255,255,.7), transparent 70%);}
  /* Bottom-row washes: camps stays white, news fades to light gray, sell fades to gray with fine diagonal lines. */
  .ws-news{background:linear-gradient(180deg, #fff 0%, #fff 22%, #f1f4f6 50%, #e2e7eb 78%, #d3dae0 100%);}
  .ws-sell{background:linear-gradient(170deg, #fff 0%, #fff 24%, #f2f4f6 55%, #e3e8ec 100%);}
  .ws-camps .ws-stage::before{background:radial-gradient(90% 80% at 50% 110%, rgba(0,188,183,.22), transparent 65%);}
  .ws-news .ws-stage::before{background:none;}
  .ws-sell .ws-stage::before{background:repeating-linear-gradient(135deg, rgba(11,26,36,.07) 0 1px, transparent 1px 8px);
    -webkit-mask-image:linear-gradient(20deg, #000 0%, transparent 60%); mask-image:linear-gradient(20deg, #000 0%, transparent 60%);}
  .ws-hosted .ws-stage::before{
    background:repeating-linear-gradient(135deg, rgba(0,188,183,.38) 0 1px, transparent 1px 8px);
    -webkit-mask-image:linear-gradient(35deg, #000 0%, transparent 55%); mask-image:linear-gradient(35deg, #000 0%, transparent 55%);}
  .ws-hosted .ws-stage::after{content:""; position:absolute; right:0; top:0; bottom:0; width:45%; pointer-events:none;
    background:linear-gradient(200deg, rgba(0,188,183,.28), transparent 60%);}

  /* ---- shared browser chrome ---- */
  .ws-browser{position:absolute; z-index:1; background:#fff; border:1px solid var(--sc-line); border-radius:6px; overflow:hidden;
    box-shadow:0 24px 50px rgba(11,26,36,.14);}
  .ws-bar{display:flex; align-items:center; gap:4px; padding:5px 8px; background:#f3f6f8; border-bottom:1px solid var(--sc-line);}
  .ws-bar > i{width:6px; height:6px; border-radius:50%; background:#d3dae0;}

  .ws-btn{display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:100px; background:var(--sc-teal-ink); color:#fff;
    font-size:11.5px; font-weight:800; white-space:nowrap; transition:transform .15s, background .15s, box-shadow .15s;
    box-shadow:0 0 0 0 rgba(0,188,183,.0);}
  .ws-btn svg{width:11px; height:11px;}
  .ws-btn.press{transform:scale(.92); background:#055f5c; box-shadow:0 0 0 5px rgba(0,188,183,.25);}

  /* ---- 1. photos ---- */
  /* The site fills the card and runs off the right edge */
  .ws-photos .ws-browser{left:40px; top:24px; width:calc(100% + 40px); box-shadow:0 30px 60px rgba(11,26,36,.18);}
  /* Mock of the real camp site header + hero: logo left, centered links, photo slider. */
  .ws-nav{position:relative; display:flex; align-items:center; height:30px; padding:0 14px; border-bottom:1px solid #eef1f3;}
  .ws-nav b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:15px;}
  /* Centered on the part of the site that shows inside the card (the rest runs off the edge). */
  .ws-nav-links{position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:11px;}
  .ws-nav-links span{font-size:8.5px; font-weight:700; color:#3b4a57; white-space:nowrap;}
  .ws-hero{position:relative; aspect-ratio:16/7; overflow:hidden; background:#0c0f14;}
  .ws-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease;}
  .ws-hero img.on{opacity:1;}
  .ws-hero::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.25) 55%, rgba(0,0,0,.05));}
  .ws-hero-copy{position:absolute; left:20px; top:50%; transform:translateY(-50%); z-index:2; max-width:44%; color:#fff;}
  .ws-hero-copy small{display:block; font-size:7.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; margin-bottom:6px;
    text-shadow:0 1px 6px rgba(0,0,0,.5);}
  .ws-hero-copy b{display:block; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:clamp(26px,3.4vw,44px); line-height:.9;
    text-transform:uppercase; letter-spacing:.3px; text-shadow:0 3px 18px rgba(0,0,0,.55);}
  .ws-hero-copy p{font-size:9px; font-weight:500; line-height:1.45; color:rgba(255,255,255,.92); margin:8px 0 10px; text-shadow:0 1px 8px rgba(0,0,0,.55);}
  .ws-hero-copy span{display:inline-block; font-size:8px; font-weight:700; padding:5px 11px; border-radius:100px; background:#fff; color:#0c0f14;
    box-shadow:0 4px 12px rgba(0,0,0,.2);}
  .ws-hero-ctrl{position:absolute; left:43%; bottom:9px; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:5px;}
  .ws-pause{width:14px; height:14px; border-radius:50%; background:rgba(40,44,52,.8);
    background-image:linear-gradient(90deg, transparent 5px, #fff 5px 6px, transparent 6px 8px, #fff 8px 9px, transparent 9px);
    background-size:100% 6px; background-position:center; background-repeat:no-repeat;}
  .ws-hero-ctrl > span{display:flex; gap:4px; padding:4px 6px; border-radius:100px; background:rgba(40,44,52,.8);}
  .ws-hero-ctrl > span i{width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.45);}
  .ws-hero-ctrl > span i.on{background:#fff;}
  .ws-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:12px 14px 16px;}
  .ws-tiles span{display:flex; flex-direction:column; gap:5px;}
  .ws-tiles img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:3px;}
  .ws-tiles i{height:5px; border-radius:3px; background:#e3e8ec;}
  .ws-tiles i + i{width:60%;}

  /* ---- 2. words: the real Content editor, cropped at the bottom of the card ---- */
  .ws-words .ws-stage{overflow:hidden; margin-top:24px;}
  .ws-admin{position:absolute; z-index:1; left:24px; right:24px; top:0; padding:12px; background:#fff; border:1px solid var(--sc-line);
    border-radius:10px; box-shadow:0 1px 2px rgba(11,26,36,.06), 0 24px 48px rgba(11,26,36,.14);}
  .ws-tabs{display:flex; gap:4px; padding:4px; border:1px solid var(--sc-line); border-radius:10px; overflow:hidden; margin-bottom:10px;}
  .ws-tabs span{flex:0 0 auto; padding:6px 11px; border-radius:7px; font-size:11.5px; font-weight:700; color:#5b6b78;}
  .ws-tabs span.on{background:var(--sc-teal); color:#fff;}
  .ws-sec{padding:14px 14px 18px; border-radius:6px; background:#f7f8f9;}
  .ws-sec-h{display:flex; align-items:center; justify-content:space-between; gap:8px; padding-left:10px; border-left:3px solid var(--sc-teal);}
  .ws-sec-h b{font-size:14px; font-weight:800;}
  .ws-saved{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:800; color:var(--ws-green); background:var(--ws-green-bg); padding:3px 8px;
    border-radius:100px; opacity:0; transform:scale(.9); transition:opacity .2s, transform .2s;}
  .ws-saved svg{width:10px; height:10px;}
  .ws-saved.show{opacity:1; transform:none;}
  .ws-sec-meta{display:flex; align-items:center; gap:12px; margin:6px 0 4px; font-size:11px; color:var(--sc-muted);}
  .ws-sec-meta span{display:inline-flex; align-items:center; gap:6px; color:var(--sc-navy); font-weight:600;}
  .ws-toggle{position:relative; width:26px; height:15px; border-radius:100px; background:#334150;}
  .ws-toggle::after{content:""; position:absolute; right:2px; top:2px; width:11px; height:11px; border-radius:50%; background:#fff;}
  .ws-slide-h{display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding:6px 0; border-bottom:1px solid var(--sc-line);}
  .ws-slide-h b{font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--sc-teal);}
  .ws-slide-h span{display:flex; gap:5px;}
  .ws-slide-h i{width:22px; height:22px; border-radius:50%; border:1px solid var(--sc-line); background:#fff; display:inline-flex; align-items:center;
    justify-content:center; color:var(--sc-navy);}
  .ws-slide-h i.off{color:#c3ccd3;}
  .ws-slide-h i.del{color:#d92d20;}
  .ws-slide-h svg{width:11px; height:11px;}
  .ws-sec label{display:block; font-size:9.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#62707c; margin:9px 0 4px;}
  .ws-field{position:relative; min-height:32px; padding:7px 11px; background:#fff; border:1px solid var(--sc-line); border-radius:8px; font-size:12.5px;
    font-weight:500; color:var(--sc-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .ws-field.is-active{border-color:var(--sc-teal); box-shadow:0 0 0 3px rgba(0,188,183,.16);}
  .ws-select{padding-right:28px;}
  .ws-select::after{content:""; position:absolute; right:11px; top:50%; margin-top:-2px; border:4px solid transparent; border-top:5px solid #6b7782;}
  /* ---- 3. camps: the real Camp Management calendar, cropped at the right and bottom ---- */
  .ws-camps .ws-stage{overflow:hidden; min-height:470px;}
  .ws-cal{position:absolute; z-index:1; left:20px; top:0; width:600px; padding:14px 14px 0; background:#f6f7f9; border:1px solid var(--sc-line);
    border-radius:10px; box-shadow:0 1px 2px rgba(11,26,36,.06), 0 24px 48px rgba(11,26,36,.14);}
  .ws-cal-top{display:flex; align-items:center; gap:18px;}
  .ws-cal-top > span:first-child{display:flex; flex-direction:column;}
  .ws-cal-top b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:17px; letter-spacing:.3px; text-transform:uppercase; color:#262d36; line-height:1.1;}
  .ws-cal-top small{font-size:9.5px; color:var(--sc-muted);}
  .ws-cal-new{display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:100px; border:1.5px solid #34b27b; background:#eefaf3;
    color:#127c4c; font-size:10.5px; font-weight:800; white-space:nowrap; transition:transform .15s, background .15s, color .15s, box-shadow .15s;}
  .ws-cal-new svg{width:10px; height:10px;}
  .ws-cal-new.press{transform:scale(.93); background:#1f9d57; color:#fff; box-shadow:0 0 0 5px rgba(31,157,87,.18);}
  .ws-cal-bar{display:flex; align-items:center; gap:18px; margin:12px 0 10px;}
  .ws-cal-tabs{display:flex; gap:2px; padding:3px; border-radius:8px; background:#eceff3;}
  .ws-cal-tabs i{font-style:normal; font-size:9.5px; font-weight:700; color:#5b6b78; padding:4px 9px; border-radius:6px;}
  .ws-cal-tabs i.on{background:#7c3aed; color:#fff;}
  .ws-cal-month{font-size:12px; font-weight:800;}
  .ws-cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); background:#fff; border:1px solid var(--sc-line); border-bottom:0;
    border-radius:8px 8px 0 0; overflow:hidden;}
  .ws-cal-wd{padding:7px 7px 6px; font-size:8px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#62707c;
    border-bottom:1px solid var(--sc-line);}
  .ws-cal-day{min-height:66px; padding:6px; border-right:1px solid #eef1f3; border-bottom:1px solid #eef1f3; display:flex; flex-direction:column; gap:4px;
    transition:background .3s;}
  .ws-cal-day:nth-child(7n){border-right:0;}
  .ws-cal-day b{font-size:9.5px; font-weight:800;}
  .ws-cal-day.is-hit{background:#f1fbf6;}
  .ws-cal-pill{display:block; padding:4px 7px; border-radius:6px; background:#13804f; color:#fff; font-size:9px; font-weight:800; line-height:1.2;
    transition:opacity .4s, transform .4s, box-shadow .4s;}
  .ws-cal-pill.is-new{animation:wsPop .45s cubic-bezier(.2,.9,.3,1.3) both; box-shadow:0 0 0 3px rgba(31,157,87,.25);}
  .ws-cal-pill.leave{opacity:0; transform:scale(.85);}
  @keyframes wsPop{from{opacity:0; transform:scale(.6);} to{opacity:1; transform:none;}}

  /* ---- 4. news: line diagram of post types (same look as "More from SideCoach") ---- */
  .ws-news{background:#f6f9fa;}
  .ws-news .ws-stage{overflow:hidden; min-height:470px;}
  .ws-net{position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#c6ebe8; stroke-width:1.1;}
  .ws-node{position:absolute; z-index:1; display:flex; flex-direction:column; align-items:center; gap:7px; transform:translate(-50%,-50%);
    text-align:center;}
  .ws-node-ic{width:44px; height:44px; border-radius:50%; background:#fff; color:var(--sc-teal-ink); border:1px solid #bfe9e5;
    display:flex; align-items:center; justify-content:center; transition:background .35s, color .35s, border-color .35s;}
  .ws-node-ic svg{width:19px; height:19px;}
  .ws-node em{font-style:normal; font-size:12.5px; font-weight:800; color:var(--sc-navy); padding:0 6px; background:#f6f9fa; white-space:nowrap;}
  .ws-node.on .ws-node-ic{background:var(--sc-teal); border-color:var(--sc-teal); color:#fff;}
  /* The newest headline fades in under the lit node's label */
  .ws-node-post{position:absolute; top:100%; left:50%; width:150px; margin:4px 0 0 -75px; padding:0 4px; background:#f6f9fa;
    font-size:11.5px; font-weight:600; line-height:1.35; color:var(--sc-teal-ink); pointer-events:none;
    opacity:0; transform:translateY(-4px); transition:opacity .35s ease, transform .35s ease;}
  .ws-node.on .ws-node-post{opacity:1; transform:none;}

  /* ---- 5. sell content: the real Create Content form, cropped, with its sticky footer ---- */
  .ws-sell .ws-stage{overflow:hidden; min-height:470px;}
  .ws-form{position:absolute; z-index:1; left:30px; right:30px; top:6px; padding:12px; background:#fff; border:1px solid var(--sc-line); border-radius:10px;
    box-shadow:0 1px 2px rgba(11,26,36,.06), 0 24px 48px rgba(11,26,36,.14);}
  .ws-form-h{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:16px; letter-spacing:.3px; text-transform:uppercase; color:#262d36;
    margin:0 0 8px 2px;}
  .ws-form .ws-sec{padding:0 12px 70px; background:#fff; border:1px solid var(--sc-line); transition:opacity .3s;}
  .ws-form .ws-sec.swap{opacity:.25;}
  .ws-form .ws-sec label{margin:8px 0 4px;}
  .ws-cover{border:1.5px dashed #d3dbe1; border-radius:8px; padding:5px;}
  .ws-cover img{display:block; width:100%; height:40px; object-fit:cover; border-radius:5px;}
  .ws-chip{display:inline-block; margin-top:10px; padding:5px 11px; border-radius:100px; background:var(--sc-teal); color:#fff; font-size:10.5px; font-weight:800;}
  .ws-form-foot{position:absolute; z-index:2; left:31px; right:31px; bottom:0; display:flex; gap:8px; padding:10px 12px;
    background:#fff; border-top:1px solid var(--sc-line); box-shadow:0 -10px 20px rgba(11,26,36,.06);}
  .ws-form-foot > span{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px; height:30px; border-radius:100px;
    font-size:11px; font-weight:800; transition:transform .15s, background .25s, box-shadow .15s;}
  .ws-draft{border:1px solid var(--sc-line); color:var(--sc-navy);}
  .ws-publish{background:var(--sc-teal); color:#fff;}
  .ws-publish em{font-style:normal;}
  .ws-publish svg{width:11px; height:11px;}
  .ws-publish.press{transform:scale(.94); box-shadow:0 0 0 5px rgba(0,188,183,.22);}
  .ws-publish.is-done{background:var(--ws-green);}
  .ws-sale{position:absolute; z-index:3; left:50%; top:10px; width:calc(100% - 64px); display:flex; align-items:center; gap:10px; padding:10px 12px;
    background:#fff; border-radius:8px; border:1px solid var(--sc-line); box-shadow:0 18px 40px rgba(11,26,36,.22);
    opacity:0; transform:translate(-50%,-12px); transition:opacity .35s, transform .35s;}
  .ws-sale.show{opacity:1; transform:translate(-50%,0);}
  .ws-sale > svg{flex:0 0 26px; width:26px; height:26px; padding:5px; border-radius:50%; background:var(--ws-green-bg); color:var(--ws-green);}
  .ws-sale span{display:flex; flex-direction:column; min-width:0;}
  .ws-sale b{font-size:11.5px; font-weight:800;}
  .ws-sale small{font-size:10.5px; color:var(--sc-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

  /* ---- 6. hosted (full width) ---- */
  .ws-hosted .ws-copy{padding:36px 32px 36px;}
  .ws-checks{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
  .ws-checks li{display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:700;}
  .ws-checks svg{width:18px; height:18px; flex:0 0 18px; padding:3px; border-radius:50%; background:var(--ws-green); color:#fff;}
  .ws-hosted .ws-stage{margin-top:0; min-height:420px;}
  .ws-hosted .ws-stage{overflow:hidden;}
  .ws-dash{left:18%; top:36px; width:720px;}
  .ws-dash-in{padding:14px 16px 6px;}
  .ws-dash-h{display:flex; align-items:center; gap:10px; font-size:14px; margin-bottom:12px;}
  .ws-dash-h small{margin-left:auto; font-size:11px; color:var(--sc-muted);}
  .ws-status{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; color:var(--ws-green); background:var(--ws-green-bg);
    padding:3px 8px; border-radius:100px;}
  .ws-status i{width:6px; height:6px; border-radius:50%; background:var(--ws-green); animation:wsPulse 1.6s ease-in-out infinite;}
  @keyframes wsPulse{50%{box-shadow:0 0 0 4px rgba(31,157,87,.2);}}
  .ws-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px;}
  .ws-stats div{padding:9px 10px; border:1px solid var(--sc-line); border-radius:4px;}
  .ws-stats small{display:block; font-size:10px; font-weight:700; color:var(--sc-muted);}
  .ws-stats b{font-size:17px; font-weight:800; font-variant-numeric:tabular-nums;}
  .ws-table{font-size:11.5px;}
  .ws-th,.ws-tr{display:grid; grid-template-columns:1.2fr 1.5fr .6fr .6fr; gap:8px; align-items:center; padding:7px 6px;}
  .ws-th{font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--sc-muted); border-bottom:1px solid var(--sc-line);}
  .ws-tr{border-bottom:1px solid var(--sc-line); transition:background .35s;}
  .ws-tr:last-child{border-bottom:0;}
  .ws-tr.on{background:var(--sc-mint); font-weight:700;}
  .ws-tr span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .ws-tr span:first-child{display:flex; align-items:center; gap:7px;}
  .ws-tr i,.ws-receipt-h i{flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:var(--sc-teal-ink); color:#fff; font-style:normal;
    font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;}
  .ws-paid{color:var(--ws-green); font-weight:800;}

  .ws-receipt{position:absolute; z-index:2; left:28px; bottom:28px; width:230px; padding:16px; background:#fff; border-radius:6px; border:1px solid var(--sc-line);
    box-shadow:0 28px 60px rgba(11,26,36,.24);}
  .ws-receipt > *{transition:opacity .25s, transform .25s;}
  .ws-receipt.swap > *{opacity:0; transform:translateY(4px);}
  .ws-receipt-h{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:800;}
  .ws-receipt-h i{width:26px; height:26px; font-size:12px;}
  .ws-receipt-ok{display:flex; align-items:center; gap:6px; margin:10px 0 8px; font-size:12px; font-weight:800; color:var(--ws-green);}
  .ws-receipt-ok svg{width:14px; height:14px; padding:2px; border-radius:50%; background:var(--ws-green); color:#fff;}
  .ws-receipt dl{display:grid; grid-template-columns:auto 1fr; margin:0; font-size:12px;}
  .ws-receipt dt,.ws-receipt dd{padding:7px 0; border-top:1px solid var(--sc-line);}
  .ws-receipt dt{color:var(--sc-muted);}
  .ws-receipt dd{margin:0; text-align:right; font-weight:700;}

  /* ---- responsive ---- */
  @media (max-width:1000px){
    .ws-grid{grid-template-columns:1fr 1fr;}
    .ws-photos,.ws-hosted{grid-column:1 / -1;}
    .ws-words{grid-column:1 / -1;}
    .ws-words .ws-stage{min-height:360px;}
    .ws-admin{left:50%; right:auto; width:min(420px,86%); transform:translateX(-50%);}
  }
  @media (max-width:720px){
    .ws-grid{grid-template-columns:1fr;}
    .ws-hosted{grid-template-columns:1fr;}
    .ws-hosted .ws-copy{padding:28px 24px 0;}
    .ws-dash{left:16px;}
    .ws-receipt{left:16px; bottom:16px; width:200px;}
    .ws-photos .ws-browser{left:16px; width:calc(100% + 20px);}
    .ws-photos .ws-stage{min-height:320px;}
    .ws-section .pc-wrap::before,.ws-section .pc-wrap::after{display:none;}
  }
  @media (max-width:480px){
    .ws-photos .ws-stage{min-height:300px;}
    .ws-th,.ws-tr{grid-template-columns:1.3fr 1.4fr .7fr;}
    .ws-th span:last-child,.ws-tr span:last-child{display:none;}
  }
  @media (prefers-reduced-motion:reduce){
    .ws-status i{animation:none;}
  }


.pc-hero-reg{background:#f6f9fa;}
  .pc-hero-reg::before{display:none;}
  /* The slanted band, behind the art and under the copy. */
  .pc-hero-reg::after{content:""; position:absolute; left:42%; right:0; top:30%; bottom:4%; pointer-events:none;
    background:linear-gradient(100deg, #00BCB7 0%, #00aaa5 100%);
    clip-path:polygon(0 56%, 100% 0, 100% 52%, 0 100%);}
  .pc-hero-reg .pc-hero-in{z-index:1;}

  .rh{position:relative; padding:0 0 64px 120px;}

  /* Browser: the coach's Camp Management calendar */
  .rh-browser{position:relative; background:#f6f7f9; border-radius:8px; overflow:hidden;
    box-shadow:0 30px 60px rgba(11,26,36,.16), 0 0 0 1px rgba(11,26,36,.05);}
  .rh-bar{display:flex; align-items:center; justify-content:space-between; padding:8px 16px; background:#fff; border-bottom:1px solid #eceff2;}
  .rh-bar b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:14px; color:var(--sc-navy);}
  .rh-avatar{width:20px; height:20px; border-radius:50%; background:var(--sc-teal); color:#fff; font-size:7.5px; font-weight:800;
    display:inline-flex; align-items:center; justify-content:center;}
  .rh-cm{padding:14px 16px 0;}
  .rh-cm-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
  .rh-cm-top > span:first-child{display:flex; flex-direction:column;}
  .rh-cm-top b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:19px; letter-spacing:.3px; text-transform:uppercase; color:#262d36; line-height:1.05;}
  .rh-cm-top small{font-size:8.5px; color:#5b6b78;}
  .rh-cm-btns{display:flex; gap:5px;}
  .rh-cm-btns em{display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:100px; font-style:normal; font-size:8.5px; font-weight:800; white-space:nowrap;}
  .rh-cm-btns svg{width:9px; height:9px;}
  .rh-new{border:1.2px solid #34b27b; background:#eefaf3; color:#127c4c;}
  .rh-tpl{background:#13804f; color:#fff;}
  .rh-cm-bar{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:12px 0 10px;}
  .rh-tabs{display:flex; gap:2px; padding:3px; border-radius:7px; background:#eceff3;}
  .rh-tabs i{font-style:normal; font-size:8.5px; font-weight:700; color:#5b6b78; padding:4px 9px; border-radius:5px;}
  .rh-tabs i.on{background:#7c3aed; color:#fff;}
  .rh-month{display:flex; align-items:center; gap:5px;}
  .rh-month em{display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:100px; background:#fff; border:1px solid #e3e8ec;
    font-style:normal; font-size:8.5px; font-weight:700;}
  .rh-month em svg{width:9px; height:9px;}
  .rh-month i{width:18px; height:18px; border-radius:5px; background:#fff; border:1px solid #e3e8ec; display:inline-flex; align-items:center;
    justify-content:center; font-style:normal; font-size:11px; line-height:1;}
  .rh-month b{font-size:10.5px; font-weight:800;}
  .rh-cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); background:#fff; border:1px solid #e3e8ec; border-bottom:0; border-radius:6px 6px 0 0;}
  .rh-wd{padding:6px; font-size:6.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:#62707c; border-bottom:1px solid #e3e8ec;}
  .rh-day{min-height:44px; padding:5px; display:flex; flex-direction:column; gap:3px; border-right:1px solid #eef1f3; border-bottom:1px solid #eef1f3;}
  .rh-day:nth-child(7n){border-right:0;}
  .rh-day b{font-size:8px; font-weight:800;}
  .rh-day.off{background:#f7f8fa;}
  .rh-day.off b{color:#c3ccd3; font-weight:600;}
  .rh-day i{display:block; padding:3px 6px; border-radius:100px; background:#13804f; color:#fff; font-style:normal; font-size:6.5px; font-weight:800;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

  /* Phone: the Registration Command Center, in front of the browser */
  /* Dark bezel like the other heroes' phones; zoom shrinks it without reflowing the screen. */
  .rh-phone{position:absolute; z-index:2; left:0; top:150px; width:236px; zoom:.8; padding:7px; border-radius:32px; background:#111418;
    box-shadow:0 30px 60px rgba(11,26,36,.38);}
  .rh-screen{border-radius:25px; overflow:hidden; background:#f3f4f6; padding:16px 12px 0;}
  .rh-cc-h b{display:block; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:15px; line-height:1.05; letter-spacing:.3px;
    text-transform:uppercase; color:#262d36;}
  .rh-cc-h small{display:block; margin-top:3px; font-size:7px; color:#5b6b78;}
  .rh-select{position:relative; margin-top:10px; padding:8px 22px 8px 10px; border-radius:8px; background:#fff; border:1px solid #e3e8ec;
    font-size:8.5px; font-weight:800; white-space:nowrap; overflow:hidden;}
  .rh-select::after{content:""; position:absolute; right:9px; top:50%; margin-top:-2px; border:3.5px solid transparent; border-top:4.5px solid #6b7782;}
  .rh-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin-top:10px;}
  .rh-stats span{padding:6px 6px 7px; border-radius:4px; border:1px solid #e3e8ec; border-left-width:3px; background:#fff;}
  .rh-stats small{display:block; font-size:5.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#5b6b78; white-space:nowrap;}
  .rh-stats b{font-size:13px; font-weight:800;}
  .rh-stats i{font-style:normal;}
  .rh-stats .reg{border-left-color:#2f5be0; background:#f4f7ff;} .rh-stats .reg b{color:#2f5be0;}
  .rh-stats .cap{border-left-color:#ef7d22; background:#fff7ef;} .rh-stats .cap b{color:#c25d0c;}
  .rh-stats .in{border-left-color:#1f9d57; background:#f0faf4;} .rh-stats .in b{color:#127c4c;}
  .rh-chips{display:flex; gap:4px; margin-top:9px;}
  .rh-chips span{display:inline-flex; align-items:center; gap:3px; padding:4px 7px; border-radius:100px; background:#fff; border:1px solid #e3e8ec;
    font-size:6.5px; font-weight:800; white-space:nowrap;}
  .rh-chips span.on{background:#e4e8ec;}
  .rh-chips i{font-style:normal; padding:1px 4px; border-radius:100px; background:#eef1f3; font-size:6px;}
  .rh-list{margin:10px -12px 0; padding:9px 12px 4px; background:#fff; border-top:1px solid #e3e8ec;}
  .rh-search{display:flex; align-items:center; gap:5px; padding:6px 8px; border:1px solid #e3e8ec; border-radius:6px; font-size:7.5px; color:#62707c;}
  .rh-search svg{width:9px; height:9px;}
  .rh-th{display:flex; gap:22px; margin:8px -12px 0; padding:5px 12px; background:#f7f8fa; font-size:6px; font-weight:800; letter-spacing:.6px;
    text-transform:uppercase; color:#3b4a57;}
  .rh-ath{display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid #f0f2f4;}
  .rh-num{width:20px; height:16px; border:1px dashed #cfd6dc; border-radius:3px; font-size:7px; color:#62707c; display:inline-flex;
    align-items:center; justify-content:center;}
  .rh-who{flex:1; min-width:0; display:flex; flex-direction:column;}
  .rh-who b{font-size:8.5px; font-weight:800;}
  .rh-who small{font-size:6.5px; color:#6b7782;}
  .rh-ci{padding:5px 8px; border-radius:5px; border:1px solid #f3c3cd; background:#fdf2f4; color:#c0344d; font-size:7.5px; font-weight:800;
    white-space:nowrap; transition:background .3s, color .3s, border-color .3s;}
  .rh-ci.done{border-color:#bfe6cf; background:#e7f6ee; color:#127c4c;}


  @media (max-width:960px){
    .pc-hero-reg::after{left:0; top:52%;}
    .rh{padding-left:90px;}
  }
  @media (max-width:620px){
    .rh{padding:0 0 40px 60px;}
    .rh-phone{top:70px; zoom:.62;}
    .rh-cm-btns .rh-tpl,.rh-month em{display:none;}
  }

.rs{--sc-teal:#00BCB7; --sc-teal-ink:#00726f; --sc-mint:#eefaf8; --sc-navy:#0b1a24; --sc-line:#e1e7eb; --sc-muted:#5b6b78;
    padding:clamp(64px,8vw,104px) 0; color:var(--sc-navy); overflow:hidden;}
  /* A thin divider across the top of each section, matching the one above "More from SideCoach". */
    .rs-copy p{font-size:16.5px; line-height:1.65; color:var(--sc-muted); margin-top:18px; max-width:440px;}

  /* ---- 1. one camp or fifty ---- */
  .rs-one{background:#fff;}
  .rs-one-in{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(36px,6vw,80px); align-items:center; margin-top:48px;}
  .rs-item{position:relative; display:block; width:100%; margin-bottom:34px; padding:0; border:0; background:none; font:inherit; color:inherit;
    text-align:left; cursor:pointer;}
  .rs-item:last-child{margin-bottom:0;}
  .rs-item b{position:relative; display:block; font-size:19px; letter-spacing:-.01em; font-weight:800; transition:color .3s;}
  .rs-item b::before{content:""; position:absolute; left:-16px; top:3px; width:1.5px; height:20px; background:#c3ccd3; transition:background .3s, height .3s;}
  .rs-item.on b{color:var(--sc-teal-ink);}
  .rs-item.on b::before{width:2px; background:var(--sc-teal);}
  .rs-item p{font-size:14.5px; line-height:1.65; color:var(--sc-muted); margin-top:8px; max-width:380px; transition:opacity .3s;}
  
  .rs-item:focus-visible{outline:2px solid #007a76; outline-offset:6px; border-radius:2px;}

  .rs-stack{position:relative; padding-top:34px;}
  .rs-layer{position:absolute; height:30px; border-radius:6px 6px 0 0;}
  .rs-layer.l3{top:0; left:9%; right:9%; background:#5fe0da;}
  .rs-layer.l2{top:10px; left:6%; right:6%; background:#0f2f45;}
  .rs-layer.l1{top:22px; left:3%; right:3%; background:var(--sc-teal);}
  /* Front of the stack: the real Create New Camp screen */
  .rs-front{position:relative; height:470px; border-radius:8px; overflow:hidden; background:#f3f4f6;
    box-shadow:0 40px 80px rgba(11,26,36,.2), 0 0 0 1px rgba(11,26,36,.06);}
  .rs-app{padding:18px 18px 0;}
  .rs-app-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
  .rs-app-top > span:first-child{display:flex; flex-direction:column;}
  .rs-app-top b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:20px; letter-spacing:.3px; text-transform:uppercase; color:#262d36; line-height:1.05;}
  .rs-app-top small{font-size:9px; color:var(--sc-muted);}
  .rs-app-btns{display:flex; gap:6px;}
  .rs-app-btns em{padding:6px 11px; border-radius:100px; font-style:normal; font-size:9.5px; font-weight:800; white-space:nowrap;}
  .rs-cancel{background:#fff; border:1px solid #e3e8ec; color:var(--sc-navy);}
  .rs-publish{background:#1f9d57; color:#fff; transition:box-shadow .3s, transform .3s;}
  .rs-publish.ready{box-shadow:0 0 0 5px rgba(31,157,87,.2); transform:scale(1.05);}
  .rs-mode{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:10px 14px; background:#fff;
    border:1px solid #e6eaee; border-radius:6px;}
  .rs-mode small{display:block; font-size:7.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#5b6b78;}
  .rs-mode b{font-size:9.5px; font-weight:700;}
  .rs-seg{display:flex; padding:2px; border:1px solid #e3e8ec; border-radius:100px;}
  .rs-seg i{font-style:normal; font-size:9px; font-weight:700; padding:4px 11px; border-radius:100px; color:#3b4a57;}
  .rs-seg i.on{background:var(--sc-teal); color:#fff; font-weight:800;}
  .rs-form{margin-top:10px; background:#fff; border:1px solid #e6eaee; border-radius:6px 6px 0 0;}
  .rs-tabs{display:flex; gap:2px; margin:10px 12px 0; padding:3px; border:1px solid #e6eaee; border-radius:8px; width:max-content; max-width:calc(100% - 24px);
    overflow:hidden; box-shadow:0 2px 6px rgba(11,26,36,.04);}
  .rs-tabs i{font-style:normal; font-size:9px; font-weight:700; padding:5px 8px; border-radius:6px; color:#3b4a57; white-space:nowrap; transition:background .3s, color .3s;}
  .rs-tabs i.on{background:var(--sc-teal); color:#fff; font-weight:800;}
  .rs-panes{position:relative; height:236px; margin-top:10px; border-top:1px solid #eef1f3; overflow:hidden;}
  .rs-pane{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; align-content:start; gap:9px 10px; padding:12px 14px;
    opacity:0; transform:translateX(40px); transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); pointer-events:none;}
  .rs-pane.on{opacity:1; transform:none;}
  .rs-pane.out{opacity:0; transform:translateX(-40px);}
  .rs-pane.out-r{opacity:0; transform:translateX(40px);}
  .rs-f{display:block; min-width:0;}
  .rs-f.full{grid-column:1 / -1;}
  .rs-f small{display:block; margin-bottom:4px; font-size:7px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:#62707c;}
  .rs-f i{position:relative; display:block; padding:6px 9px; border:1px solid #e3e8ec; border-radius:6px; font-style:normal; font-size:9.5px; color:var(--sc-navy);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .rs-f.tall i{height:36px; white-space:normal;}
  .rs-f.sel i{font-weight:700; padding-right:20px;}
  .rs-f.sel i::after{content:""; position:absolute; right:9px; top:50%; margin-top:-2px; border:3.5px solid transparent; border-top:4.5px solid #6b7782;}
  .rs-event{grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; padding:9px 10px; background:#f8f9fa;
    border-left:3px solid var(--sc-teal); border-radius:4px;}
  .rs-event > b{grid-column:1 / -1; font-size:8px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--sc-teal);}
  .rs-row3{grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:7px; background:#fff; border:1px solid #e9edf0; border-radius:5px;}
  .rs-prices{grid-column:1 / -1; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .rs-prices small{font-size:9.5px; font-weight:800; margin-right:4px;}
  .rs-prices em{font-style:normal; font-size:8.5px; padding:4px 9px; border:1px solid #e3e8ec; border-radius:100px;}
  .rs-prices em b{margin-left:3px; font-weight:800; color:var(--sc-teal-ink);}
  .rs-sec-l{grid-column:1 / -1; font-size:9.5px; font-weight:800;}
  .rs-tg{grid-column:1 / -1; display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid #e3e8ec; border-radius:6px;}
  .rs-tg b{font-size:9.5px; font-weight:800;}
  .rs-tg small{margin-left:auto; font-size:8.5px; color:var(--sc-muted);}
  .rs-switch{position:relative; flex:0 0 22px; width:22px; height:13px; border-radius:100px; background:var(--sc-teal);}
  .rs-switch::after{content:""; position:absolute; right:2px; top:2px; width:9px; height:9px; border-radius:50%; background:#fff;}
  .rs-switch.off{background:#cfd6dc;}
  .rs-switch.off::after{right:auto; left:2px;}
  .rs-foot{display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-top:1px solid #eef1f3; font-size:9px; color:#3b4a57;}
  .rs-foot em{font-style:normal; font-size:9px; font-weight:800; padding:5px 11px; border:1px solid #e3e8ec; border-radius:100px; color:var(--sc-navy);
    transition:transform .15s, background .15s, color .15s;}
  .rs-next.press{transform:scale(.92); background:var(--sc-teal); color:#fff; border-color:var(--sc-teal);}

  /* ---- 2. refund policies: isometric stack ----
     Each layer is a flat face tilted into isometric view. Its solid edge is a run of
     1px shadows offset toward the bottom corner, colored per refund tier. */
  /* Same backdrop as the website showcase's "Hosted and maintained" card:
     teal pinstripes fading in from the bottom left, a teal wash at the top right. */
  .rs-two{position:relative; background:#fff;}
  .rs-two::before,.rs-two::after{content:""; position:absolute; pointer-events:none;}
  .rs-two::before{inset:0; background:repeating-linear-gradient(135deg, rgba(0,188,183,.38) 0 1px, transparent 1px 8px);
    -webkit-mask-image:linear-gradient(35deg, #000 0%, transparent 50%); mask-image:linear-gradient(35deg, #000 0%, transparent 50%);}
  .rs-two::after{right:0; top:0; bottom:0; width:45%; background:linear-gradient(200deg, rgba(0,188,183,.26), transparent 60%);}
  .rs-two .pc-wrap{position:relative; z-index:1;}
  .rs-two-in{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(36px,6vw,80px); align-items:center;}
  .rs-iso{position:relative; height:610px;}
  .rs-iso::before{content:""; position:absolute; left:44%; top:52%; width:700px; height:380px; margin:-190px 0 0 -350px; border-radius:50%;
    background:radial-gradient(closest-side, rgba(0,188,183,.12), transparent); pointer-events:none;}
  .rs-slab{position:absolute; left:44%; width:320px; height:320px; margin-left:-160px; animation:rsFloat 7s ease-in-out infinite;}
  .rs-slab-face{--edge:#cfd8de; position:relative; width:100%; height:100%; border-radius:10px; background:#fff; border:1.5px solid #d3dbe1;
    transform:rotateX(58deg) rotateZ(-45deg); backface-visibility:hidden; -webkit-font-smoothing:antialiased;
    box-shadow:-1px 1px 0 var(--edge), -2px 2px 0 var(--edge), -3px 3px 0 var(--edge), -4px 4px 0 var(--edge), -5px 5px 0 var(--edge), -6px 6px 0 var(--edge), -7px 7px 0 var(--edge), -8px 8px 0 var(--edge), -9px 9px 0 var(--edge), -10px 10px 0 var(--edge), -11px 11px 0 var(--edge), -12px 12px 0 var(--edge),
      -26px 26px 40px rgba(11,26,36,.12);
    display:flex; flex-direction:row; align-items:flex-end; justify-content:flex-start; gap:8px; padding:0 0 22px 24px;}
  .rs-slab-face b{font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--sc-navy); white-space:nowrap;}
  .rs-slab-face small{padding-bottom:3px; font-size:12px; font-weight:600; color:var(--sc-muted); white-space:nowrap;}
  .rs-slab.rs-s0{top:20px; z-index:5; --lift:-12px;}
  .rs-slab.rs-s0 .rs-slab-face{--edge:#00726f; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0;
    border-color:#00BCB7; background:linear-gradient(135deg, #ffffff 30%, #eefaf8);}
  .rs-slab.rs-s0 em{font-style:normal; font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--sc-muted);}
  .rs-slab.rs-s0 b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:40px; letter-spacing:.4px; text-transform:uppercase; color:var(--sc-teal-ink);}
  .rs-slab.rs-s0 small{font-size:15px; padding:0;}
  .rs-slab.rs-s1{top:84px; z-index:4; --lift:-8px;}   .rs-slab.rs-s1 .rs-slab-face{--edge:#00BCB7;}
  .rs-slab.rs-s2{top:148px; z-index:3; --lift:-4px;}  .rs-slab.rs-s2 .rs-slab-face{--edge:#7fd9d4;}
  .rs-slab.rs-s3{top:212px; z-index:2; --lift:-2px;}  .rs-slab.rs-s3 .rs-slab-face{--edge:#b8c2ca;}
  .rs-pct{font-style:normal; padding:0 4px; margin:0 -4px; border-radius:4px; transition:background .3s, color .3s;}
  .rs-pct.flash{background:rgba(0,188,183,.2); color:var(--sc-teal-ink);}
  .rs-edit{margin:0 -2px 4px 0; padding:2px 7px; border-radius:100px; background:var(--sc-teal); color:#fff;
    font-size:9.5px; font-weight:800; letter-spacing:.3px;}
  .rs-slab.rs-base{top:276px; z-index:1; animation:none;}
  .rs-slab.rs-base .rs-slab-face{background:transparent; border:1.5px dashed #b9c4cc; box-shadow:none;}
  .rs-two .rs-checks{margin-top:26px;}
  .rs-two .rs-checks li{font-size:15.5px;}
  @keyframes rsFloat{50%{transform:translateY(var(--lift,0));}}

  .rs-checks{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
  .rs-checks li{display:flex; align-items:center; gap:10px; font-size:14.5px; color:#3b4a57;}
  .rs-checks svg{flex:0 0 18px; width:18px; height:18px; padding:3px; border-radius:50%; background:rgba(0,188,183,.16); color:var(--sc-teal-ink);}

  /* ---- 3. checkout: a phone stepping through a family's registration, beside the three steps ---- */
  .rs-three{position:relative; background:#f6f9fa;}
  .rs-three-in{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(36px,6vw,80px); align-items:center;}
  .rs-co-steps{margin-top:40px; padding-left:16px;}
  .rs-co-art{position:relative; display:flex; justify-content:center; padding:24px 0;}
  /* A teal panel behind the phone, fading out to the left, like the washes on the other sections. */
  .rs-co-art::before{content:""; position:absolute; left:6%; right:0; top:12%; bottom:12%; border-radius:16px;
    background:linear-gradient(200deg, rgba(0,188,183,.30), rgba(0,188,183,.06) 70%); pointer-events:none;}
  .rs-co-art::after{content:""; position:absolute; left:6%; right:0; top:12%; bottom:12%; border-radius:16px; pointer-events:none;
    background:repeating-linear-gradient(135deg, rgba(0,188,183,.30) 0 1px, transparent 1px 8px);
    -webkit-mask-image:linear-gradient(35deg, #000 0%, transparent 45%); mask-image:linear-gradient(35deg, #000 0%, transparent 45%);}
  /* Phone and the camp's notification sit together, the card just overlapping the phone's edge. */
  .rs-co-stage{position:relative; z-index:1; width:546px; max-width:100%;}
  .rs-co-phone{position:relative; z-index:1; width:300px; padding:9px; border-radius:46px; background:#f4f6f8; border:1px solid #dfe5e9;
    box-shadow:0 1px 0 #fff inset, 0 40px 80px -20px rgba(11,26,36,.3), 0 18px 36px -18px rgba(11,26,36,.25);}
  .rs-co-in{position:relative; height:580px; overflow:hidden; padding:0 18px; border-radius:38px; background:#fff; border:1px solid #e6ebef;}
  .rs-co-top{display:flex; justify-content:space-between; align-items:center; padding:14px 8px 4px; font-size:12px; font-weight:800;}
  .rs-co-top > i{width:78px; height:22px; border-radius:100px; background:var(--sc-navy);}
  .rs-co-bars{display:flex; gap:2px; align-items:flex-end;} .rs-co-bars i{width:3px; border-radius:1px; background:var(--sc-navy);}
  .rs-co-bars i:nth-child(1){height:5px;} .rs-co-bars i:nth-child(2){height:8px;} .rs-co-bars i:nth-child(3){height:11px;}
  .rs-co-url{display:flex; align-items:center; justify-content:center; gap:5px; margin:8px 0 14px; padding:6px 10px; border-radius:100px; background:#f1f4f6;
    font-size:10.5px; font-weight:700;}
  .rs-co-url svg{width:10px; height:10px; color:#127c4c;}
  .rs-co-camp{display:flex; align-items:center; gap:11px;}
  .rs-co-camp img{flex:0 0 48px; width:48px; height:48px; border-radius:9px; object-fit:cover;}
  .rs-co-camp b{display:block; font-size:14px; font-weight:800;}
  .rs-co-camp small{display:block; margin-top:2px; font-size:11px; color:#62707c;}
  /* Progress: three segments that fill as the family moves through checkout. */
  .rs-co-prog{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:18px 0 16px;}
  .rs-co-prog span{font-size:10px; font-weight:700; color:#62707c; transition:color .3s;}
  .rs-co-prog span i{display:block; height:3px; margin-bottom:6px; border-radius:3px; background:#e6ebef; transition:background .4s;}
  .rs-co-prog span.on{color:var(--sc-teal-ink);} .rs-co-prog span.on i{background:var(--sc-teal);}
  .rs-co-screens{position:relative; height:330px;}
  .rs-co-scr{position:absolute; inset:0; display:flex; flex-direction:column; gap:8px; opacity:0; transform:translateX(18px); pointer-events:none;
    transition:opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1);}
  .rs-co-scr.on{opacity:1; transform:none;}
  .rs-co-k{margin-top:4px; font-size:10.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#62707c;}
  .rs-co-who{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; border:1.5px solid var(--sc-teal); background:var(--sc-mint);}
  .rs-co-who > i,.rs-co-toast-h > i{display:flex; align-items:center; justify-content:center; flex:0 0 30px; height:30px; border-radius:50%;
    background:var(--sc-teal); color:#fff; font-style:normal; font-size:13px; font-weight:800;}
  .rs-co-who > span{flex:1;} .rs-co-who b{display:block; font-size:13px;} .rs-co-who small{font-size:10.5px; color:var(--sc-muted);}
  .rs-co-who > svg{width:16px; height:16px; color:var(--sc-teal-ink);}
  .rs-co-opt{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; border:1px solid #e3e8ec; font-size:12.5px;}
  .rs-co-opt i{flex:0 0 14px; height:14px; border-radius:50%; border:1.5px solid #c3ccd3;}
  .rs-co-opt b{flex:1; font-weight:600;} .rs-co-opt em{font-style:normal; font-weight:700;}
  .rs-co-opt.on{border-color:var(--sc-teal); box-shadow:0 0 0 3px rgba(0,188,183,.12);}
  .rs-co-opt.on i{border:4px solid var(--sc-teal);}
  .rs-co-chk{display:grid; grid-template-columns:18px 1fr auto; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; border:1px solid #e3e8ec; font-size:12.5px;}
  .rs-co-chk i{display:flex; width:18px; height:18px; border-radius:5px; border:1.5px solid #c3ccd3; color:#fff;}
  .rs-co-chk i svg{width:12px; height:12px; margin:auto; opacity:0;}
  .rs-co-chk.on i{background:var(--sc-teal); border-color:var(--sc-teal);} .rs-co-chk.on i svg{opacity:1;}
  .rs-co-chk b{font-weight:600;} .rs-co-chk small{font-size:10.5px; color:#62707c;}
  .rs-co-pol{display:block; padding:10px 12px; border-radius:10px; background:#f6f9fa;}
  .rs-co-pol small{display:block; font-size:10.5px; color:#62707c;} .rs-co-pol b{display:block; margin-top:2px; font-size:12.5px; font-weight:700;}
  .rs-co-btn{display:block; margin-top:auto; padding:13px; border-radius:10px; background:var(--sc-teal); color:#fff; text-align:center; font-size:14px; font-weight:800;
    transition:transform .2s, box-shadow .2s;}
  .rs-co-btn.ghost{background:#fff; color:var(--sc-teal-ink); border:1.5px solid var(--sc-teal);}
  .rs-co-btn.press,.rs-co-apple.press{transform:scale(.96); box-shadow:0 0 0 5px rgba(0,188,183,.22);}
  .rs-co-line{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid #eef1f3; font-size:12.5px;}
  .rs-co-line small{display:block; margin-top:2px; font-size:10.5px; color:#62707c;}
  .rs-co-line.total{border-bottom:0; font-size:14px; font-weight:800;}
  .rs-co-apple{display:flex; align-items:center; justify-content:center; gap:3px; height:44px; margin-top:auto; border-radius:10px; background:#000; color:#fff;
    font-size:16px; font-weight:600; transition:transform .2s, box-shadow .2s;}
  .rs-co-apple svg{width:17px; height:17px;}
  .rs-co-or{display:flex; align-items:center; gap:10px; font-size:10.5px; color:#62707c;}
  .rs-co-or::before,.rs-co-or::after{content:""; flex:1; height:1px; background:#e3e8ec;}
  .rs-co-card{display:flex; justify-content:space-between; align-items:center; padding:11px 12px; border:1px solid #e3e8ec; border-radius:10px; font-size:12px; color:#62707c;}
  .rs-co-card span{display:inline-flex; align-items:center; gap:7px;} .rs-co-card svg{width:15px; height:15px;}
  .rs-co-card em{padding:2px 6px; border-radius:3px; background:#1a1f71; color:#fff; font-style:italic; font-size:9.5px; font-weight:900;}
  .rs-co-done{display:flex; flex-direction:column; align-items:center; padding:22px 0 10px; text-align:center;}
  .rs-co-done i{display:flex; width:56px; height:56px; border-radius:50%; background:var(--sc-mint); color:var(--sc-teal-ink); box-shadow:0 0 0 8px rgba(0,188,183,.08);}
  .rs-co-done i svg{width:28px; height:28px; margin:auto;}
  .rs-co-scr.on .rs-co-done i{animation:rsPop .6s cubic-bezier(.2,.9,.3,1.4);}
  .rs-co-done b{margin-top:16px; font-size:19px; font-weight:800; letter-spacing:-.01em;}
  .rs-co-done small{margin-top:6px; max-width:220px; font-size:12px; line-height:1.5; color:var(--sc-muted);}
  .rs-co-home{position:absolute; left:50%; bottom:9px; width:110px; height:4px; margin-left:-55px; border-radius:100px; background:var(--sc-navy);}
  /* What the camp sees: the registration lands and the spots filled tick up. */
  .rs-co-toast{position:absolute; z-index:2; left:276px; bottom:24%; width:270px; padding:16px; border-radius:12px; background:#fff;
    box-shadow:0 2px 4px rgba(11,26,36,.05), 0 30px 60px -16px rgba(11,26,36,.28), 0 0 0 1px rgba(11,26,36,.05);}
  .rs-co-toast.pop{animation:rsToast .7s cubic-bezier(.2,.9,.3,1.3);}
  .rs-co-toast-h{display:flex; align-items:center; gap:10px;}
  .rs-co-toast-h > span{flex:1; min-width:0;}
  .rs-co-toast-h b{display:block; font-size:13px;}
  .rs-co-toast-h small{display:block; font-size:11px; color:var(--sc-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .rs-co-toast-h em{font-style:normal; font-size:13px; font-weight:800; color:#127c4c;}
  .rs-co-spots{display:block; margin-top:14px; padding-top:12px; border-top:1px solid #eef1f3;}
  .rs-co-spots small{display:block; font-size:11.5px; color:var(--sc-muted);} .rs-co-spots small b{color:var(--sc-navy);}
  .rs-co-spots > i{display:block; height:6px; margin-top:7px; border-radius:6px; background:#e6ebef; overflow:hidden;}
  .rs-co-spots > i i{display:block; height:100%; border-radius:6px; background:var(--sc-teal); transition:width .6s cubic-bezier(.2,.8,.2,1);}
  @keyframes rsToast{0%{transform:translateY(12px) scale(.96); opacity:.4;} 100%{transform:none; opacity:1;}}
  @keyframes rsPop{from{transform:scale(.4);}}

  @media (prefers-reduced-motion:reduce){ .rs-slab{animation:none;} .rs-co-toast.pop,.rs-co-scr.on .rs-co-done i{animation:none;} .rs-co-scr{transition:none;} }
  @media (max-width:960px){
    .rs-one-in,.rs-two-in,.rs-three-in{grid-template-columns:1fr;}
    .rs-three .rs-copy{order:-1;}
    .rs-items{padding-left:16px;}
    .rs-iso{transform:scale(.85); transform-origin:top center; height:540px;}
    .rs-slab,.rs-iso::before{left:50%;}
  }
  @media (max-width:560px){
    .rs-co-art::before,.rs-co-art::after{left:0;}
    .rs-co-toast{display:none;}
    .rs-co-stage{width:auto;}
    .rs-tabs i{padding:5px 6px; font-size:8px;}
    .rs-iso{transform:scale(.62); transform-origin:top center; height:400px;}
  }

/* =====================================================================
   SIDECOACH ADJUSTMENTS to the port
   ===================================================================== */
/* drawings: icons are line art */
.ws-section svg:not(.ws-swoosh):not(.ws-net):not(.us-map):not(.usm):not(.wc-spray),.rs svg,.rh svg,.dv-chrome svg{fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.ws-section .ws-head{margin-bottom:44px;}
.ws-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
.ws-slide-h{padding:8px 0;}

/* the three items beside the Create New Camp form and the checkout phone */
.rs-items{margin:0; padding:0 0 0 16px; list-style:none;}
.rs-item{cursor:default;}
.rs-item p{color:var(--pc-text);}
.rs-item:not(.on) b{color:#3b4a57;}
@media (hover:hover){ .rs-item{cursor:pointer;} }
.rs .pc-sh{max-width:28em;}
.rs-copy .pc-text{max-width:30em;}

/* refunds: the cutoff layers */
.rs-slab.rs-s0 b{font-size:36px;}

/* checkout: the signature and the card's second row */
.rs-co-sign{display:block; padding:9px 12px; border:1px solid #e3e8ec; border-radius:10px;}
.rs-co-sign small{display:block; font-size:10.5px; color:#6b7782;}
.rs-co-sign b{display:block; margin-top:2px; font-family:'Brush Script MT','Segoe Script',cursive; font-size:22px; font-weight:400; color:var(--sc-navy);}
.rs-co-card2{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.rs-co-card2 span{padding:11px 12px; border:1px solid #e3e8ec; border-radius:10px; font-size:12px; color:#6b7782;}
.rs-co-chk{grid-template-columns:18px 1fr;}

/* ---- the registration hero, inside the product template ---- */
.pc-hero-reg .pc-hero-art.rh{padding:0 0 64px 120px;}
.pc-hero-reg .pc-hero-art.rh > *{animation:none;}
.pc-hero-reg .rh-browser{animation:pc-rise .8s cubic-bezier(.2,.7,.2,1) both;}
.pc-hero-reg .rh-phone{animation:pc-rise .8s cubic-bezier(.2,.7,.2,1) .18s both;}

/* Window chrome on the hero browser: three controls and an address pill. */
.dv-chrome{position:relative; display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#fff; border-bottom:1px solid #edf0f3;}
.dv-chrome i{width:8px; height:8px; border-radius:50%;}
.dv-chrome i:nth-child(1){background:#ff6058;} .dv-chrome i:nth-child(2){background:#ffbd2e;} .dv-chrome i:nth-child(3){background:#28c940;}
.dv-chrome span{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:5px;
  height:18px; padding:0 12px; border-radius:6px; background:#f2f4f6; font-size:9px; font-weight:600; color:#5b6b78; white-space:nowrap;}
.dv-chrome span svg{width:8px; height:8px; color:#127c4c;}
.pc-hero-reg .rh-browser{border-radius:12px;
  box-shadow:0 0 0 1px rgba(11,26,36,.07), 0 2px 4px rgba(11,26,36,.04), 0 22px 44px -14px rgba(6,96,120,.30), 0 60px 110px -36px rgba(24,72,170,.36);}
.pc-hero-reg .rh-bar{background:#fafbfc;}

/* Phones: a light silver iPhone like Stripe's (metal rim, white bezel). */
.pc-hero-reg .rh-phone{padding:6px; border-radius:34px; background:#fff;
  box-shadow:0 0 0 1px #e6eaee, 0 0 0 2.5px #d3dae0, 0 3px 6px rgba(11,26,36,.06), 0 30px 60px -18px rgba(6,70,100,.30), 0 54px 110px -36px rgba(24,72,170,.32);}
.pc-hero-reg .rh-screen{border-radius:28px; box-shadow:0 0 0 1px #dfe5e9;}
.pc-hero .pc-hero-phone{padding:clamp(4px,.4vw,6px); background:#fff;
  box-shadow:0 0 0 1px #e6eaee, 0 0 0 2.5px #d3dae0, 0 3px 6px rgba(11,26,36,.06), 0 30px 60px -18px rgba(6,70,100,.30), 0 54px 110px -36px rgba(24,72,170,.32);}
.pc-hero .pc-hero-phone img{box-shadow:0 0 0 1px #dfe5e9;}

@media (max-width:959.98px){
  .pc-hero-reg .pc-hero-art.rh{padding-left:90px;}
}
@media (max-width:620px){
  .pc-hero-reg .pc-hero-art.rh{padding:0 0 40px 60px;}
}

.rs-co-steps{margin-top:40px;}
/* one column on narrow screens, sized to the screen rather than the drawings */
@media (max-width:960px){ .rs-one-in,.rs-two-in,.rs-three-in{grid-template-columns:minmax(0,1fr);} }

/* =====================================================================
   MOTION AND RHYTHM (2026-10-16 review): live hero, count-ups, reveals,
   step timers, the pinned checkout story on a dark band, a photo band.
   ===================================================================== */

/* ---- 1. the website hero's laptop shows a live camp site, in a light finish ---- */
.pc-hero .pc-laptop-screen{background:#fff; padding:1.6%;
  box-shadow:0 0 0 1px #e6eaee, 0 0 0 2.5px #d3dae0, 0 22px 44px -14px rgba(6,96,120,.30), 0 60px 110px -36px rgba(24,72,170,.32);}
.pc-hero-site{overflow:hidden;}
.pc-hero-site .ws-site{aspect-ratio:16/10; overflow:hidden; border-radius:6px; background:#fff; box-shadow:0 0 0 1px #edf0f3;}
.pc-hero-site .ws-hero{aspect-ratio:auto; height:72%;}
.pc-hero-site .ws-hero-copy b{font-size:clamp(20px,2.6vw,38px);}
.pc-hero-site .ws-tiles{padding:8px 12px;}
.pc-hero-site .ws-tiles img{aspect-ratio:16/8;}
/* every slideshow photo eases in with a slow push */
.ws-hero img.on{animation:ws-push 7s ease-out both;}
@keyframes ws-push{from{transform:scale(1.06);} to{transform:none;}}

/* ---- 2/3. scroll reveals (scripts/page-website-registration.js adds .rv to what is
   still below the fold, then .rv-in as it arrives) ---- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--rv-i,0) * 70ms);}
.rv.rv-in{opacity:1; transform:none;}

/* ---- 4. the active step shows how long until the next one ---- */
.rs-item{position:relative;}
.rs-item b::after{content:""; position:absolute; left:-16px; top:3px; width:2px; height:0; background:var(--sc-teal-ink);}
.rs-item.on.is-timed b::after{animation:rs-timer var(--rs-dur,3.6s) linear both;}
.is-paused .rs-item.on.is-timed b::after{animation-play-state:paused;}
@keyframes rs-timer{from{height:0;} to{height:20px;}}
.rs-item:focus-visible{outline:2px solid var(--pc-button); outline-offset:6px; border-radius:4px;}

/* ---- 5/6. checkout on a dark band: on wide screens the phone stays put while the
   three steps scroll past it ---- */
.rs-three{background:#0b1a24; color:#fff;}
.rs-three::before{content:""; position:absolute; left:-10%; top:-20%; width:720px; height:720px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,188,183,.22), transparent);}
.rs-three .pc-sh{color:rgba(255,255,255,.72);}
.rs-three .pc-sh b{color:#fff;}
.rs-three .rs-item b{color:rgba(255,255,255,.86);}
.rs-three .rs-item.on b{color:#5fd8d4;}
.rs-three .rs-item p{color:rgba(255,255,255,.74);}
.rs-three .rs-item b::before{background:rgba(255,255,255,.25);}
.rs-three .rs-item.on b::before{background:#5fd8d4;}
.rs-three .rs-item b::after{background:#5fd8d4;}
.rs-three .rs-co-art::before{background:linear-gradient(200deg, rgba(0,188,183,.45), rgba(0,188,183,.08) 70%);}
.rs-three .rs-co-art::after{display:none;}
.rs-co-phone{box-shadow:0 40px 90px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);}
.rs-co-toast{color:var(--sc-navy);}
/* a tap on the phone's button */
.rs-co-btn{position:relative; overflow:hidden;}
.rs-co-btn.press::after{content:""; position:absolute; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%;
  background:rgba(255,255,255,.55); animation:rs-tap .5s ease-out both;}
@keyframes rs-tap{from{transform:scale(.4); opacity:1;} to{transform:scale(6); opacity:0;}}

@media (min-width:961px){
  /* Wide screens: the band holds still for a short scroll while the steps turn
     on a wheel, the current one in the middle and the others curving away
     above and below it, and the phone shows that step. */
  .rs-three.is-pinned{padding:0;}
  .rs-three.is-pinned .rs-three-in{display:block; position:relative; height:calc(100vh - 128px + var(--wheel-run,90vh));}
  .rs-three.is-pinned .rs-stick{position:sticky; top:128px; height:calc(100vh - 128px); min-height:640px;
    display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(36px,6vw,80px); align-items:center;}
  .rs-three.is-pinned .rs-co-art{padding:0;}
  .rs-three.is-pinned .rs-co-art::before{top:8%; bottom:8%;}
  .rs-three.is-pinned .rs-co-steps{position:relative; height:360px; margin:36px 0 0; padding:0 0 0 16px; perspective:900px;
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
            mask-image:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);}
  .rs-three.is-pinned .rs-co-steps .rs-item{position:absolute; left:16px; right:0; top:50%; margin:0; min-height:0;
    transform-origin:50% 50% -160px; will-change:transform,opacity;}
  .rs-three.is-pinned .rs-item b::after{display:none;}
}

/* ---- 7. fewer, larger details in the drawings ---- */
.pc-hero-reg .rh-phone{zoom:.95; top:120px;}
.pc-hero-reg .rh-browser{zoom:1.06;}
.rs-front{zoom:1.1;}

/* ---- 8. card copy and the news card's newest post ---- */
.ws-copy p{font-size:14.5px;}
.ws-card:not(.ws-hosted) .ws-copy p{margin-top:6px;}
.ws-post{position:absolute; z-index:2; left:50%; bottom:22px; width:min(300px,82%); display:flex; gap:10px; align-items:center; padding:10px;
  background:#fff; border:1px solid var(--sc-line); border-radius:10px; box-shadow:0 18px 40px rgba(11,26,36,.16);
  transform:translateX(-50%); transition:opacity .35s, transform .35s;}
.ws-post.swap{opacity:0; transform:translate(-50%,10px);}
.ws-post img{flex:0 0 56px; width:56px; height:42px; object-fit:cover; border-radius:6px;}
.ws-post span{display:flex; flex-direction:column; min-width:0;}
.ws-post small{font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--sc-teal-ink);}
.ws-post b{font-size:12.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ws-post em{font-style:normal; font-size:10.5px; color:var(--sc-muted);}

/* ---- 9. the photo band ---- */
.pc-band{position:relative; isolation:isolate; overflow:hidden; min-height:clamp(320px,42vw,560px); display:flex; align-items:flex-end; color:#fff;}
.pc-band img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 35%;}
.pc-band::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(11,26,36,.82), rgba(11,26,36,.35) 55%, rgba(11,26,36,.05)), linear-gradient(0deg, rgba(11,26,36,.55), transparent 50%);}
.pc-band-in{width:100%; padding-bottom:clamp(40px,6vw,80px);}
.pc-band-title{margin:0; font-family:var(--pc-display); font-weight:400; text-transform:uppercase; font-size:clamp(40px,5.4vw,80px); line-height:.95;}
.pc-band-title span{display:block; color:#5fd8d4;}
.pc-band p{margin-top:14px; font-size:clamp(16px,1.5vw,19px); color:rgba(255,255,255,.88);}

/* ---- 10. the second product's hero is a section opener, not a new page ---- */
.pc-hero-short .pc-hero-in{min-height:0; padding-top:clamp(56px,6vw,88px); padding-bottom:clamp(48px,6vw,80px);}
/* the line where two light sections meet */
.rs-two{border-top:1px solid #eef1f4;}

/* ---- phones: one big device instead of two small ones ---- */
@media (max-width:640px){
  #camp-website .pc-hero-art{padding:0;}
  #camp-website .pc-laptop{display:none;}
  #camp-website .pc-hero-phone{position:relative; width:58%; margin:0 auto;}
  .pc-hero-reg .pc-hero-art.rh{padding:0 0 24px;}
  .pc-hero-reg .rh-browser{display:none;}
  .pc-hero-reg .rh-phone{position:relative; left:auto; top:auto; zoom:1.05; margin:0 auto;}
  .rs-front{zoom:1;}
}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none;}
  .ws-hero img.on,.rs-co-btn.press::after{animation:none;}
  .rs-item.on.is-timed b::after{animation:none;}
}
/* the phone keeps its own (light) colours on the dark band */
.rs-three .rs-co-phone{color:var(--sc-navy);}
/* overflow:hidden would stop the phone sticking; clip keeps the glow in without that */
.rs-three{overflow:clip;}
/* the camp site's headline sits clear of the phone in front of the laptop */
.pc-hero-site .ws-hero-copy{left:auto; right:6%; max-width:48%; text-align:right;}
.pc-hero-site .ws-hero::after{background:linear-gradient(270deg, rgba(0,0,0,.72), rgba(0,0,0,.25) 55%, rgba(0,0,0,.05));}
.pc-hero-site .ws-hero-ctrl{left:62%;}

/* .rs-stick holds the phone and the copy; it is the two-column grid */
.rs-three-in{display:block;}
.rs-stick{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(36px,6vw,80px); align-items:center;}
@media (max-width:960px){ .rs-stick{grid-template-columns:minmax(0,1fr);} .rs-stick .rs-copy{order:-1;} }

/* =====================================================================
   ONE PHONE for every drawing on the page, in SideCoach navy: a slim body
   with a lit rim, side buttons, the island and a status bar. The screen is
   a 9:19.5 phone screen; what is drawn on it is laid out to fit it.
   Sizes are in the phone's own pixels (260 wide); zoom scales the device.
   ===================================================================== */
.pc-page .sc-phone{position:relative; box-sizing:border-box; width:260px; height:auto; aspect-ratio:9/19.2; padding:8px; border:0;
  border-radius:44px; background:linear-gradient(150deg,#22384c 0%,#0d1b2a 38%,#0b1724 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 0 0 1px #08121c, 0 0 0 2px #31495e,
    0 30px 60px -18px rgba(6,40,60,.45), 0 60px 110px -40px rgba(13,27,42,.5);}
/* side buttons */
.pc-page .sc-phone::before,.pc-page .sc-phone::after{content:""; position:absolute; width:3px; border-radius:2px; background:#2a4155;}
.pc-page .sc-phone::before{left:-4px; top:22%; height:11%; box-shadow:0 -46px 0 -9px #2a4155;}
.pc-page .sc-phone::after{right:-4px; top:28%; height:15%;}
.pc-page .sc-screen{position:relative; box-sizing:border-box; height:100%; overflow:hidden; border-radius:36px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);}
.sc-status{position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; height:34px; padding:0 20px 0 24px;
  font-size:11.5px; font-weight:800; color:#0b1a24;}
.sc-island{position:absolute; left:50%; top:9px; width:74px; height:21px; margin-left:-37px; border-radius:20px; background:#05090d;}
.sc-bars{display:flex; gap:2px; align-items:flex-end;}
.sc-bars i{width:3px; border-radius:1px; background:#0b1a24;}
.sc-bars i:nth-child(1){height:5px;} .sc-bars i:nth-child(2){height:8px;} .sc-bars i:nth-child(3){height:11px;}
.sc-home{position:absolute; z-index:3; left:50%; bottom:7px; width:96px; height:4px; margin-left:-48px; border-radius:4px; background:#0b1a24;}
/* what runs past the bottom of the screen fades out, like a page that keeps scrolling */
.pc-page .sc-screen::after{content:""; position:absolute; z-index:2; left:0; right:0; bottom:0; height:56px;
  background:linear-gradient(rgba(255,255,255,0), #fff 80%); pointer-events:none;}

/* ---- the website hero's phone: the camp site, laid out for a phone ---- */
.pc-hero .pc-hero-phone.sc-phone{position:absolute; left:0; bottom:0; width:260px; zoom:.84; padding:8px; z-index:2;}
.mp-nav{display:flex; align-items:center; justify-content:space-between; height:38px; padding:0 14px; border-bottom:1px solid #eef1f3;}
.mp-nav b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:17px; color:#0b1a24;}
.mp-menu{display:grid; gap:3px; width:26px; height:26px; place-content:center; border:1px solid #e3e8ec; border-radius:7px;}
.mp-menu i{display:block; width:12px; height:1.6px; border-radius:2px; background:#0b1a24;}
.mp-hero{position:relative; height:228px; overflow:hidden; background:#0c0f14;}
.mp-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease;}
.mp-hero img.on{opacity:1; animation:ws-push 7s ease-out both;}
.mp-hero::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,.1) 70%);}
.mp-hero-copy{position:absolute; z-index:2; left:14px; right:14px; bottom:28px; color:#fff;}
.mp-hero-copy small{display:block; font-size:8px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;}
.mp-hero-copy b{display:block; margin:4px 0 9px; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:27px; line-height:.95; text-transform:uppercase;}
.mp-hero-copy span{display:inline-block; padding:5px 12px; border-radius:100px; background:#fff; color:#0b1a24; font-size:9.5px; font-weight:800;}
.mp-dots{position:absolute; z-index:2; left:0; right:0; bottom:11px; display:flex; justify-content:center; gap:4px;}
.mp-dots i{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.45);} .mp-dots i.on{background:#fff;}
.mp-sec{padding:14px 14px 8px;}
.mp-sec small{display:block; font-size:8.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#00726f;}
.mp-sec b{display:block; margin-top:2px; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:19px; text-transform:uppercase; color:#0b1a24;}
.mp-camp{display:flex; align-items:center; gap:10px; margin:0 14px 8px; padding:7px; border:1px solid #e6ebef; border-radius:10px;}
.mp-camp img{flex:0 0 46px; width:46px; height:38px; object-fit:cover; border-radius:6px;}
.mp-camp span{flex:1; min-width:0; display:flex; flex-direction:column;}
.mp-camp b{font-size:11px; font-weight:800; color:#0b1a24; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mp-camp small{font-size:9.5px; color:#5b6b78;}
.mp-camp em{font-style:normal; font-size:11px; font-weight:800; color:#00726f;}

/* ---- the Command Center phone ---- */
.pc-hero-reg .rh-phone.sc-phone{position:absolute; z-index:2; left:0; top:80px; width:260px; zoom:.9; padding:8px;}
.pc-hero-reg .rh-screen.sc-screen{padding:0 14px; background:#f3f4f6; border-radius:36px;}
.pc-hero-reg .rh-screen .sc-status{margin:0 -14px 6px; background:#f3f4f6;}
.pc-hero-reg .rh-screen.sc-screen::after{background:linear-gradient(rgba(255,255,255,0), #fff 80%);}

/* ---- the checkout phone (300 wide; its screens are laid out for that) ---- */
.pc-page .rs-co-phone.sc-phone{width:300px; padding:9px; border-radius:48px;}
.pc-page .rs-co-in.sc-screen{height:100%; padding:0 18px; border:0; border-radius:39px;}
.rs-co-in .sc-status{margin:0 -18px;}
.rs-co-in .rs-co-url{margin-top:4px;}
.rs-co-in.sc-screen::after{display:none;}
/* on the dark band the rim catches a little teal light */
.rs-three .rs-co-phone.sc-phone{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 1px #08121c, 0 0 0 2px rgba(95,216,212,.35),
  0 40px 90px -20px rgba(0,0,0,.65);}

/* the laptop gets the same navy bezel; its base stays silver */
.pc-hero .pc-laptop-screen{background:#0d1b2a; padding:1.8%;
  box-shadow:0 0 0 1px #08121c, 0 0 0 2px #31495e, 0 22px 44px -14px rgba(6,96,120,.30), 0 60px 110px -36px rgba(24,72,170,.32);}

@media (max-width:640px){
  #camp-website .pc-hero-phone.sc-phone{position:relative; left:auto; bottom:auto; margin:0 auto; zoom:1;}
  .pc-hero-reg .rh-phone.sc-phone{position:relative; left:auto; top:auto; margin:0 auto; zoom:1;}
  .pc-page .rs-co-phone.sc-phone{zoom:.92;}
}
@media (prefers-reduced-motion:reduce){ .mp-hero img.on{animation:none;} }

/* =====================================================================
   DEVICES, second pass (Stripe-style): a light, near-frameless phone and a
   browser window, the same pair in both heroes. Every phone screen is laid
   out to end inside the screen; nothing runs off its bottom.
   ===================================================================== */
.pc-page .sc-phone{padding:7px; border-radius:42px; background:#fff;
  box-shadow:0 0 0 1px #e3e8ec, 0 0 0 2.5px #d5dce2, 0 2px 4px rgba(11,26,36,.05),
    0 30px 60px -18px rgba(6,70,100,.28), 0 60px 110px -40px rgba(24,72,170,.30);}
.pc-page .sc-phone::before,.pc-page .sc-phone::after{background:#d5dce2;}
.pc-page .sc-phone::before{box-shadow:0 -46px 0 -9px #d5dce2;}
.pc-page .sc-screen{border-radius:35px; box-shadow:0 0 0 1px #e6ebef;}
.pc-page .sc-screen::after{display:none;}
.rs-three .rs-co-phone.sc-phone{box-shadow:0 0 0 1px rgba(255,255,255,.5), 0 0 0 2.5px rgba(255,255,255,.18), 0 40px 90px -20px rgba(0,0,0,.6);}

/* ---- website hero: a browser window with the phone over its lower-left corner ---- */
#camp-website .pc-hero-art{padding:0 0 56px 110px;}
.pc-window{position:relative; overflow:hidden; border-radius:12px; background:#fff;
  box-shadow:0 0 0 1px rgba(11,26,36,.07), 0 2px 4px rgba(11,26,36,.04), 0 22px 44px -14px rgba(6,96,120,.30), 0 60px 110px -36px rgba(24,72,170,.36);}
.pc-window .pc-hero-site .ws-site{border-radius:0; box-shadow:none; aspect-ratio:16/10.4;}
.pc-hero .pc-hero-phone.sc-phone{left:0; bottom:0; zoom:.7;}

/* the phone's camp site: a column that ends on a sticky Register bar */
.pc-hero-phone .sc-screen{display:flex; flex-direction:column;}
.pc-hero-phone .mp-hero{flex:none; height:192px;}
.pc-hero-phone .mp-hero-copy b{font-size:30px;}
.pc-hero-phone .mp-sec{padding:14px 14px 8px;}
.pc-hero-phone .mp-camp{padding:8px;}
.pc-hero-phone .mp-camp b{font-size:12px;}
.pc-hero-phone .mp-camp small{font-size:10px;}
.mp-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding:12px 14px 24px;
  border-top:1px solid #eef1f3; background:#fff;}
.mp-bar small{display:block; font-size:9.5px; color:#5b6b78;}
.mp-bar b{display:block; font-size:15px; font-weight:800; color:#0b1a24;}
.mp-bar em{font-style:normal; padding:9px 18px; border-radius:100px; background:#00807c; color:#fff; font-size:12px; font-weight:800;}

/* ---- Command Center phone: the list ends inside the screen ---- */
.pc-hero-reg .rh-screen.sc-screen{display:flex; flex-direction:column; padding-bottom:22px;}
.pc-hero-reg .rh-list{flex:1; overflow:hidden; margin-bottom:0; border-radius:0 0 18px 18px;}
.pc-hero-reg .rh-ath:last-child{border-bottom:0;}

@media (max-width:640px){
  #camp-website .pc-hero-art{padding:0;}
  #camp-website .pc-window{display:none;}
  #camp-website .pc-hero-phone.sc-phone{zoom:.95;}
}

/* The hero phone holds its shape whatever the text size: every line stays on one
   line, the camp list takes only the room that is left, and the Register bar
   always sits whole at the bottom, above the home bar. */
.pc-hero-phone .mp-list{flex:1 1 auto; min-height:0; overflow:hidden;}
.pc-hero-phone .mp-camp{flex:none;}
.pc-hero-phone .mp-camp small,.pc-hero-phone .mp-bar small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pc-hero-phone .mp-bar{flex:none; padding:10px 14px 22px;}
.pc-hero-phone .mp-bar span{flex:1; min-width:0;}
.pc-hero-phone .mp-bar em{flex:none; white-space:nowrap;}
.pc-hero-phone .mp-hero{flex:none;}
.pc-hero-phone .mp-nav,.pc-hero-phone .sc-status{flex:none;}

/* =====================================================================
   THE HERO BAND: the teal band behind the devices, with a curved edge, color
   that drifts slowly along it, and a soft light that glides across it every
   few seconds. The shape is an SVG mask stretched to the band's box, so the
   curve scales with the hero. It holds still with reduced motion.
   ===================================================================== */
#camp-website .pc-hero::after,.pc-hero-reg::after{content:none;}
.pc-band-fx{position:absolute; z-index:-1; pointer-events:none; overflow:hidden;
  -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;}
/* website hero: the band rises from the bottom left and fades in toward the devices */
#camp-website .pc-band-fx{left:26%; right:0; bottom:0; height:82%;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C30 72 62 30 100 6L100 50C80 62 56 80 36 100Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C30 72 62 30 100 6L100 50C80 62 56 80 36 100Z'/%3E%3C/svg%3E");
  background:linear-gradient(100deg, rgba(0,188,183,0) 0%, rgba(0,188,183,.18) 16%, rgba(95,216,212,.55) 30%, rgba(0,188,183,.6) 44%,
    rgba(30,170,200,.5) 58%, rgba(0,188,183,.62) 72%, rgba(143,224,219,.6) 86%, rgba(0,188,183,.6) 100%);
  background-size:220% 100%;}
/* registration hero: the solid band slanting up behind the browser */
.pc-hero-reg .pc-band-fx{left:30%; right:0; top:26%; bottom:4%;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 84C30 60 64 24 100 0L100 52C70 64 40 78 0 88Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 84C30 60 64 24 100 0L100 52C70 64 40 78 0 88Z'/%3E%3C/svg%3E");
  background:linear-gradient(100deg, rgba(0,188,183,0) 0%, rgba(0,188,183,.7) 12%, #00bcb7 22%, #3fcfc9 34%, #00b3b5 50%, #12aac6 64%, #00bcb7 80%, #00a9a4 100%);
  background-size:220% 100%;}
/* the light gliding across */
.pc-band-fx::after{content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  background-size:260% 100%; background-position:130% 0; background-repeat:no-repeat;}
@media (prefers-reduced-motion:no-preference){
  .pc-band-fx{animation:pc-band-flow 16s ease-in-out infinite alternate;}
  .pc-band-fx::after{animation:pc-band-shine 7s cubic-bezier(.4,0,.2,1) infinite 1.2s;}
}
@keyframes pc-band-flow{from{background-position:0% 0;} to{background-position:100% 0;}}
@keyframes pc-band-shine{0%{background-position:130% 0;} 45%,100%{background-position:-30% 0;}}
@media (max-width:959.98px){
  .pc-hero-reg .pc-band-fx{left:0; top:52%;}
}
/* the registration band's tip fades in; a second mask that stays put while the color flows */
.pc-hero-reg .pc-band-fx{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 84C30 60 64 24 100 0L100 52C70 64 40 78 0 88Z'/%3E%3C/svg%3E"), linear-gradient(90deg, transparent, #000 26%);
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 84C30 60 64 24 100 0L100 52C70 64 40 78 0 88Z'/%3E%3C/svg%3E"), linear-gradient(90deg, transparent, #000 26%);
  -webkit-mask-composite:source-in; mask-composite:intersect;}

/* =====================================================================
   HERO GUIDE LINES (Stripe-style): instead of a stripe every 32px, a few
   faint lines on the page's columns: solid at the content edges, finely
   dashed between, fading out down the hero.
   ===================================================================== */
#camp-website .pc-hero::before,.pc-hero-reg::before{content:none;}
.pc-gridlines{position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);}
.pc-gridlines .pc-wrap{position:relative; height:100%;}
.pc-gridlines i{position:absolute; top:0; bottom:0; width:1px;
  left:calc(var(--pc-gutter) + (100% - 2 * var(--pc-gutter)) * var(--k));
  background:repeating-linear-gradient(180deg, rgba(13,27,42,.10) 0 3px, transparent 3px 8px);}
.pc-gridlines i:nth-child(1){--k:0; background:rgba(13,27,42,.07);}
.pc-gridlines i:nth-child(2){--k:.25;}
.pc-gridlines i:nth-child(3){--k:.5;}
.pc-gridlines i:nth-child(4){--k:.75;}
.pc-gridlines i:nth-child(5){--k:1; background:rgba(13,27,42,.07);}
@media (max-width:640px){ .pc-gridlines i:nth-child(2),.pc-gridlines i:nth-child(4){display:none;} }
/* the showcase's side lines continue the hero's edge lines straight down */
.ws-section .pc-wrap::before{left:var(--pc-gutter);}
.ws-section .pc-wrap::after{right:var(--pc-gutter);}

/* ---- checkout band: a soft glow and two faint rings behind the phone instead of
   the teal panel, so the phone looks lit rather than set on a slab ---- */
.rs-three .rs-co-art::before{content:none;}
.rs-three.is-pinned .rs-co-art::before{content:none;}
.rs-co-stage::before,.rs-co-stage::after{content:""; position:absolute; z-index:-1; left:150px; top:50%; border-radius:50%;
  pointer-events:none; transform:translate(-50%,-50%);}
.rs-three .rs-co-stage::before{width:620px; height:620px;
  background:radial-gradient(closest-side, rgba(0,188,183,.42), rgba(0,188,183,.16) 50%, rgba(0,188,183,0) 100%);}
.rs-three .rs-co-stage::after{width:440px; height:440px; border:1px solid rgba(95,216,212,.20);
  box-shadow:0 0 0 90px rgba(95,216,212,.025), 0 0 0 91px rgba(95,216,212,.10);}
@media (prefers-reduced-motion:no-preference){
  .rs-three .rs-co-stage::before{animation:rs-glow 6s ease-in-out infinite;}
}
@keyframes rs-glow{50%{opacity:.75; transform:translate(-50%,-50%) scale(.94);}}
@media (max-width:560px){ .rs-co-stage::before,.rs-co-stage::after{left:50%;} .rs-three .rs-co-stage::before{width:420px; height:420px;} .rs-three .rs-co-stage::after{width:320px; height:320px;} }
/* softer: a wide gentle glow, and two hairline rings (the outer one an offset outline) */
.rs-three .rs-co-stage::before{width:760px; height:760px;
  background:radial-gradient(closest-side, rgba(0,188,183,.34), rgba(0,188,183,.12) 45%, rgba(0,188,183,0) 100%);}
.rs-three .rs-co-stage::after{width:460px; height:460px; border:1px solid rgba(95,216,212,.16); box-shadow:none;
  outline:1px solid rgba(95,216,212,.08); outline-offset:80px;}
.rs-three .rs-co-stage::before{left:230px;
  background:radial-gradient(closest-side, rgba(0,188,183,.5), rgba(0,188,183,.2) 42%, rgba(0,188,183,0) 100%);}

/* the wheel's steps read a size up: titles between the heading (34px) and the body
   copy, with the accent bar and spacing grown to match */
@media (min-width:961px){
  .rs-three.is-pinned .rs-co-steps{height:420px;}
  .rs-three.is-pinned .rs-co-steps .rs-item b{font-size:clamp(20px,1.75vw,25px); line-height:1.25; letter-spacing:-.015em;}
  .rs-three.is-pinned .rs-co-steps .rs-item b::before{left:-18px; top:3px; width:2px; height:26px;}
  .rs-three.is-pinned .rs-co-steps .rs-item.on b::before{width:3px;}
  .rs-three.is-pinned .rs-co-steps .rs-item p{margin-top:10px; max-width:30em; font-size:clamp(15.5px,1.2vw,17.5px); line-height:1.6;}
}

/* =====================================================================
   "IT LOOKS LIKE YOUR PROGRAM" (moved from Marketing, 2026-10-16): pick a
   program color and the drawn camp website recolors. --pk-c is the primary
   (nav, footer), --pk-a the accent (buttons), --pk-t a light tint (chips).
   ===================================================================== */
.pk-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.pk-brand{padding:clamp(72px,9vw,120px) 0; background:#fff; border-top:1px solid #eef1f4;}
.pk-brand-in{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(36px,5vw,72px); align-items:center;}
.pk-brand-k{margin:28px 0 12px; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-text);}
.pk-swatches{display:flex; flex-wrap:wrap; gap:12px;}
.pk-swatches button{position:relative; width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg, var(--s) 50%, var(--t) 50%); box-shadow:0 0 0 1px rgba(13,27,42,.12); transition:transform .15s, box-shadow .15s;}
.pk-swatches button:hover{transform:scale(1.06);}
.pk-swatches button.on{box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--s);}
.pk-swatches button:focus-visible{outline:2px solid var(--pc-button); outline-offset:6px;}
.pk-brand .pc-checks{margin-top:28px;}

.pk-brand-art{--pk-c:#0d1b2a; --pk-a:#00807c; --pk-t:#e6f8f7; position:relative; padding:0 0 70px;}
.pk-brand-art *{transition:background-color .45s, color .45s, border-color .45s, box-shadow .45s;}
.pk-site{position:relative; overflow:hidden; border-radius:14px; background:#fff;
  box-shadow:0 0 0 1px rgba(11,26,36,.07), 0 2px 4px rgba(11,26,36,.04), 0 30px 60px -20px rgba(6,96,120,.28), 0 70px 120px -50px rgba(24,72,170,.30);}
.pk-s-nav{display:flex; align-items:center; gap:16px; padding:12px 18px; border-bottom:3px solid var(--pk-a); background:#fff;}
.pk-s-logo{display:flex; align-items:center; gap:9px;}
.pk-s-logo b,.pk-s-foot b,.pk-p-nav b{display:grid; place-items:center; width:28px; height:28px; border-radius:7px; background:var(--pk-c); color:#fff;
  font-family:var(--pc-display); font-weight:400; font-size:16px;}
.pk-s-logo em{font-style:normal; font-family:var(--pc-display); font-size:14px; letter-spacing:.4px; text-transform:uppercase; color:var(--pk-c);}
.pk-s-links{display:flex; gap:16px; margin-left:auto; font-size:12px; font-weight:700; color:#3b4a57;}
.pk-s-links i{font-style:normal;}
.pk-s-cta{padding:7px 14px; border-radius:99px; background:var(--pk-a); color:#fff; font-size:12px; font-weight:800;}
.pk-s-hero{position:relative; height:clamp(170px,17vw,230px); overflow:hidden; background:var(--pk-c);}
.pk-s-hero img{width:100%; height:100%; object-fit:cover; object-position:center 30%; opacity:.62; mix-blend-mode:luminosity;}
.pk-s-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--pk-c) 0%, transparent 75%); opacity:.85;}
.pk-s-hero-in{position:absolute; z-index:1; left:24px; top:50%; transform:translateY(-50%); max-width:52%; color:#fff;}
.pk-s-hero-in small{font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.9;}
.pk-s-hero-in b{display:block; margin-top:4px; font-family:var(--pc-display); font-weight:400; font-size:clamp(24px,2.5vw,34px); line-height:.95; text-transform:uppercase;}
.pk-s-hero-in p{margin-top:8px; font-size:12px; line-height:1.45; opacity:.9;}
.pk-s-hero-in span{display:inline-block; margin-top:12px; padding:7px 14px; border-radius:99px; background:var(--pk-a); font-size:11.5px; font-weight:800;}
.pk-s-sec{padding:18px 18px 20px; background:#f7f9fa;}
.pk-s-sec-h small{font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--pk-a);}
.pk-s-sec-h b{display:block; margin-top:2px; font-family:var(--pc-display); font-weight:400; font-size:19px; text-transform:uppercase; color:var(--pk-c);}
.pk-s-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px;}
.pk-s-card{position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:10px; background:#fff; box-shadow:0 0 0 1px #e6ebef, 0 8px 18px -10px rgba(11,26,36,.18);}
.pk-s-card img{width:100%; height:78px; object-fit:cover;}
.pk-s-card em{position:absolute; left:8px; top:8px; padding:3px 8px; border-radius:6px; background:var(--pk-t); color:var(--pk-c); font-style:normal; font-size:10px; font-weight:800;}
.pk-s-card b{margin:10px 10px 0; font-size:12.5px; line-height:1.25; color:var(--pc-ink);}
.pk-s-card small{margin:3px 10px 0; font-size:10.5px; color:var(--pc-muted);}
.pk-s-card > span{display:flex; align-items:center; justify-content:space-between; margin:10px; padding-top:9px; border-top:1px solid #eef1f3;}
.pk-s-card strong{font-size:13px; color:var(--pk-c);}
.pk-s-card i{font-style:normal; padding:5px 10px; border-radius:6px; background:var(--pk-a); color:#fff; font-size:10.5px; font-weight:800;}
.pk-s-foot{display:flex; align-items:center; gap:10px; padding:12px 18px; background:var(--pk-c); color:#fff;}
.pk-s-foot b{background:#fff; color:var(--pk-c); width:24px; height:24px; font-size:14px;}
.pk-s-foot span{font-family:var(--pc-display); font-size:12px; letter-spacing:.4px; text-transform:uppercase;}
.pk-s-foot i{margin-left:auto; font-style:normal; font-size:10.5px; opacity:.75;}

/* the registration page on a phone, over the window's corner */
.pc-page .pk-s-phone.sc-phone{position:absolute; right:-14px; bottom:0; width:240px; zoom:.86;}
.pk-s-phone .sc-screen{display:flex; flex-direction:column;}
.pk-p-nav{display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:3px solid var(--pk-a);}
.pk-p-nav b{width:24px; height:24px; font-size:14px;}
.pk-p-nav em{font-style:normal; font-family:var(--pc-display); font-size:12.5px; text-transform:uppercase; color:var(--pk-c);}
.pk-s-phone img{display:block; width:100%; height:120px; object-fit:cover;}
.pk-p-in{padding:12px 14px;}
.pk-p-in em{font-style:normal; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--pk-a);}
.pk-p-in b{display:block; margin:3px 0 10px; font-family:var(--pc-display); font-weight:400; font-size:20px; line-height:1; text-transform:uppercase; color:var(--pk-c);}
.pk-p-opt{display:flex; align-items:center; gap:8px; margin-top:7px; padding:9px 10px; border:1px solid #e3e8ec; border-radius:9px; font-size:12px; font-weight:600; color:var(--pc-ink);}
.pk-p-opt i{width:13px; height:13px; border-radius:50%; border:1.5px solid #c3ccd3;}
.pk-p-opt strong{margin-left:auto;}
.pk-p-opt.on{border-color:var(--pk-a); box-shadow:0 0 0 3px var(--pk-t);}
.pk-p-opt.on i{border:4px solid var(--pk-a);}
.pk-p-bar{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding:10px 14px 22px; border-top:1px solid #eef1f3;}
.pk-p-bar small{display:block; font-size:10px; color:var(--pc-muted);}
.pk-p-bar b{font-size:15px; color:var(--pc-ink);}
.pk-p-bar i{font-style:normal; padding:9px 16px; border-radius:99px; background:var(--pk-a); color:#fff; font-size:12px; font-weight:800;}

@media (max-width:960px){ .pk-brand-in{grid-template-columns:minmax(0,1fr);} }
@media (max-width:640px){
  .pk-brand-art{padding:0;}
  .pc-page .pk-s-phone.sc-phone{display:none;}
  .pk-s-links{display:none;}
  .pk-s-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pk-s-card:nth-child(3){display:none;}
  .pk-s-hero-in{max-width:70%;}
}
@media (prefers-reduced-motion:reduce){ .pk-brand-art *{transition:none;} }
@media (max-width:640px){ .pk-s-cta{margin-left:auto;} }
/* the big blocks take the program color too (Mehul 2026-10-29: the change was hard to notice):
   the hero is a gradient from the primary into the accent, the camp card pictures and the
   phone picture are plain blocks in the program's colors. The pictures are plain colour
   placeholders anyway, so the img is pushed out of its box and its background shows. The
   colors are registered so every switch fades, gradients included. */
@property --pk-c{syntax:'<color>'; inherits:true; initial-value:#0d1b2a;}
@property --pk-a{syntax:'<color>'; inherits:true; initial-value:#00807c;}
@property --pk-t{syntax:'<color>'; inherits:true; initial-value:#e6f8f7;}
.pk-brand-art{transition:--pk-c .35s ease, --pk-a .35s ease, --pk-t .35s ease;}
.pk-s-hero{background:linear-gradient(115deg, var(--pk-c) 0%, var(--pk-c) 38%, color-mix(in srgb, var(--pk-c) 55%, var(--pk-a)) 100%);}
.pk-s-hero img, .pk-s-card img, .pk-s-phone img{object-position:-9999px 0; opacity:1; mix-blend-mode:normal;}
.pk-s-hero img{background:transparent;}
.pk-s-hero::after{background:linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 60%); opacity:1;}
.pk-s-card:nth-child(1) img{background:var(--pk-c);}
.pk-s-card:nth-child(2) img{background:var(--pk-a);}
.pk-s-card:nth-child(3) img{background:color-mix(in srgb, var(--pk-c) 50%, var(--pk-a));}
.pk-s-phone img{background:linear-gradient(135deg, var(--pk-c), var(--pk-a));}
@media (prefers-reduced-motion:reduce){ .pk-brand-art{transition:none;} }
/* the band's second line in the brand teal (SC-602, #007A76); the left of the
   photo is darkened behind the words so the teal still reads at this size */
.pc-band-title span{color:#007a76; text-shadow:0 0 1px rgba(0,0,0,.2);}
.pc-band::after{background:linear-gradient(90deg, rgba(5,10,14,.93) 0%, rgba(5,10,14,.8) 38%, rgba(11,26,36,.25) 70%, rgba(11,26,36,.05)), linear-gradient(0deg, rgba(5,10,14,.55), transparent 55%);}
.pc-band::after{background:linear-gradient(90deg, rgba(5,10,14,.94) 0%, rgba(5,10,14,.92) 46%, rgba(11,26,36,.3) 74%, rgba(11,26,36,.05)), linear-gradient(0deg, rgba(5,10,14,.55), transparent 55%);}

/* =====================================================================
   "ONE CAMP OR FIFTY" steps, redesigned (2026-10-16): the current step is
   a raised card with its description and a progress line along its foot;
   the others fold to a numbered title between hairlines.
   ===================================================================== */
.rs-one .rs-items{display:grid; gap:6px; padding:0;}
.rs-one .rs-item{position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:12px; margin:0; padding:18px 20px;
  border-radius:14px; border:1px solid transparent; background:transparent; transition:background .35s, box-shadow .35s, border-color .35s;}
.rs-one .rs-item + .rs-item::before{content:""; position:absolute; left:20px; right:20px; top:-4px; height:1px; background:#e6ebee; transition:opacity .3s;}
.rs-one .rs-item.on::before,.rs-one .rs-item.on + .rs-item::before{opacity:0;}
.rs-one .rs-item b::before,.rs-one .rs-item b::after{display:none;}
.rs-one .rs-n{grid-row:span 2; padding-top:2px; font-family:var(--pc-display); font-style:normal; font-size:17px; line-height:1.2; color:#a9b4bc; transition:color .35s;}
.rs-one .rs-item b{font-size:17.5px; line-height:1.35; color:#5f6c78; transition:color .35s;}
.rs-one .rs-item p{max-height:0; margin:0; opacity:0; overflow:hidden; font-size:15px; line-height:1.6; color:var(--pc-text);
  transition:max-height .45s ease, opacity .35s ease, margin .35s ease;}
.rs-one .rs-item:hover b{color:var(--pc-ink);}
.rs-one .rs-item.on{background:#fff; border-color:#e3e9ec;
  box-shadow:0 1px 2px rgba(11,26,36,.04), 0 18px 36px -18px rgba(6,70,100,.22);}
.rs-one .rs-item.on .rs-n{color:var(--pc-teal-text);}
.rs-one .rs-item.on b{color:var(--pc-ink);}
.rs-one .rs-item.on p{max-height:140px; margin-top:8px; opacity:1;}
/* the progress line along the active card's foot */
.rs-one .rs-item::after{content:""; position:absolute; left:20px; right:20px; bottom:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#00807c,#00bcb7); transform:scaleX(0); transform-origin:0 50%; opacity:0;}
.rs-one .rs-item.on.is-timed::after{opacity:1; animation:rs-foot var(--rs-dur,3600ms) linear forwards;}
.rs-one.is-paused .rs-item.on.is-timed::after{animation-play-state:paused;}
@keyframes rs-foot{to{transform:scaleX(1);}}
@media (prefers-reduced-motion:reduce){ .rs-one .rs-item.on::after{opacity:0; animation:none;} .rs-one .rs-item p{transition:none;} }
@media (max-width:640px){ .rs-one .rs-item{padding:16px; grid-template-columns:28px minmax(0,1fr);} .rs-one .rs-item b{font-size:16.5px;} }

/* ---- phones (2026-10-16 pass): shorter drawings, nothing spilling or covered ---- */
@media (max-width:640px){
  /* website cards: each drawing only as tall as what it shows */
  .ws-camps .ws-stage{min-height:300px;}
  .ws-cal{width:520px; left:14px;}
  .ws-news .ws-stage{min-height:330px;}
  .ws-news .ws-node{transform:translate(-50%,-50%) scale(.92);}
  .ws-sell .ws-stage{min-height:400px;}
  .ws-words .ws-stage{min-height:330px;}
  /* hosted: the dashboard alone, the receipt card would cover its table */
  .ws-hosted .ws-stage{min-height:300px;}
  .ws-dash{left:16px; top:20px; width:560px;}
  .ws-receipt{display:none;}

  /* refund stack: scaled to the screen and centered, nothing past the edges */
  .rs-two .rs-iso{height:330px; transform:scale(.52); transform-origin:50% 0; margin:-10px 0 0;}
  .rs-two .rs-slab,.rs-two .rs-iso::before{left:50%;}
  .rs-two{overflow:hidden;}
}

/* ---- phones: the drawing sits right above the steps that drive it ---- */
@media (max-width:960px){
  /* "One camp or fifty": heading, then the form, then the steps */
  .rs-one .rs-one-in{display:flex; flex-direction:column; gap:28px;}
  .rs-one .rs-stack{order:-1;}
  .rs-one .rs-items{padding:0;}

  /* checkout band: heading, then the phone, then the steps */
  .rs-three .rs-stick{display:flex; flex-direction:column; gap:32px;}
  .rs-three .rs-copy{display:contents;}
  .rs-three .rs-copy .pc-sh{order:-2;}
  .rs-three .rs-co-art{order:-1;}
  .rs-three .rs-co-steps{margin:0; padding:0;}

  /* checkout steps as the same compact accordion: only the current step opens */
  .rs-three .rs-co-steps .rs-item{position:relative; margin:0; padding:16px 18px; border-radius:14px; border:1px solid transparent; cursor:pointer;
    transition:background .3s, border-color .3s;}
  .rs-three .rs-co-steps .rs-item b::before{display:none;}
  .rs-three .rs-co-steps .rs-item b{font-size:17px;}
  .rs-three .rs-co-steps .rs-item p{max-height:0; margin:0; opacity:0; overflow:hidden; transition:max-height .4s, opacity .3s, margin .3s;}
  .rs-three .rs-co-steps .rs-item.on{background:rgba(255,255,255,.06); border-color:rgba(95,216,212,.28);}
  .rs-three .rs-co-steps .rs-item.on p{max-height:140px; margin-top:6px; opacity:1;}
  .rs-three .rs-co-steps .rs-item b::after{display:block; content:""; position:absolute; left:18px; right:18px; bottom:0; top:auto; width:auto; height:2px;
    border-radius:2px; background:#5fd8d4; transform:scaleX(0); transform-origin:0 50%;}
  .rs-three .rs-co-steps .rs-item.on.is-timed b::after{animation:rs-foot var(--rs-dur,2800ms) linear forwards; height:2px;}
}
@media (max-width:960px){
  .rs-one .rs-stack{width:100%; min-width:0; align-self:stretch;}
  .rs-front{zoom:1;}
  .rs-three .rs-co-art{padding:0; align-self:center;}
  .pc-page .rs-co-phone.sc-phone{zoom:.84;}
}
@media (max-width:420px){ .rs-front{zoom:.92;} }
@media (max-width:960px){ .rs-three .rs-co-steps .rs-item b{position:static;} }

/* ---- phones: both heroes show the browser window AND the phone. The window runs
   full width; the phone overlaps its lower right corner ---- */
@media (max-width:640px){
  #camp-website .pc-hero-art{position:relative; padding:0 0 120px;}
  #camp-website .pc-window{display:block;}
  #camp-website .pc-hero-phone.sc-phone{position:absolute; left:auto; right:-6px; bottom:0; margin:0; zoom:.62;}

  .pc-hero-reg .pc-hero-art.rh{position:relative; padding:0 0 150px;}
  .pc-hero-reg .rh-browser{display:block; zoom:.9;}
  .pc-hero-reg .rh-phone.sc-phone{position:absolute; left:auto; right:-6px; top:auto; bottom:0; margin:0; zoom:.6;}
}
@media (max-width:640px){
  #camp-website .pc-hero-art{padding:0 0 170px;}
  #camp-website .pc-hero-phone.sc-phone{zoom:.46 !important; right:4px; bottom:0;}
}
@media (max-width:640px){ #camp-website .pc-hero-phone.sc-phone{width:260px; zoom:.56 !important;} #camp-website .pc-hero-art{padding-bottom:120px;} }
/* phones: no guide lines behind the hero copy */
@media (max-width:640px){ .pc-gridlines{display:none;} }
/* phones: the teal band stays below the copy, behind the devices only */
@media (max-width:640px){
  #camp-website .pc-band-fx{left:0; height:52%;}
  .pc-hero-reg .pc-band-fx{left:0; top:58%;}
}
/* the outer guide lines sit 28px out from the content edge, so the hero copy
   has room to breathe; the showcase's side lines follow them straight down */
.pc-gridlines i:nth-child(1){left:calc(var(--pc-gutter) - 28px);}
.pc-gridlines i:nth-child(5){left:calc(100% - var(--pc-gutter) + 28px);}
.ws-section .pc-wrap::before{left:calc(var(--pc-gutter) - 28px);}
.ws-section .pc-wrap::after{right:calc(var(--pc-gutter) - 28px);}

/* =====================================================================
   US MAP CARD + card washes (2026-10-16, Stripe-style): each card sits on
   its own soft color, titles only; the map lights up under the cursor and
   draws registrations in from across the country.
   ===================================================================== */
/* layout: photos + words / map (2) + camps / news, sell, hosted */
@media (min-width:1001px){
  .ws-map{grid-column:span 2;}
  .ws-hosted{grid-column:auto; display:flex; flex-direction:column;}
  .ws-hosted .ws-copy{padding:28px 28px 0;}
  .ws-hosted .ws-checks{margin-top:14px;}
  .ws-hosted .ws-stage{min-height:300px; margin-top:20px;}
  .ws-dash{left:24px; top:10px; width:600px;}
  .ws-receipt{display:none;}
}
.ws-copy h3{max-width:20ch;}
.ws-checks li{font-size:14px;}

/* soft, contrasting washes, one per card */
.ws-card{border-color:#e6ecef;}
.ws-camps{background:radial-gradient(120% 70% at 85% 100%, #dff6ea 0%, #fff 60%);}
.ws-news{background:radial-gradient(110% 70% at 20% 100%, #e3e9fb 0%, #f7f9fe 45%, #fff 75%);}
.ws-sell{background:radial-gradient(120% 70% at 80% 100%, #fde8d6 0%, #fff7f0 45%, #fff 75%);}
.ws-hosted{background:radial-gradient(120% 80% at 90% 100%, #d9f3f1 0%, #f4fbfb 50%, #fff 80%);}
.ws-news .ws-node em,.ws-news .ws-node-post{background:transparent;}

/* the map */
.ws-map{background:radial-gradient(90% 90% at 50% 70%, #e8f7f6 0%, #f5fafb 55%, #fff 85%);}
.ws-map .ws-stage{min-height:400px; overflow:hidden;}
.us-map{position:absolute; inset:6px 18px 0; width:calc(100% - 36px); height:calc(100% - 6px);}
.us-dots circle{fill:#9fd9d6; transition:fill .4s, r .4s;}
.us-dots circle.hot{fill:#00807c; r:2.6;}
.us-c{fill:#fff; stroke:#00a39e; stroke-width:1.6; transition:r .3s;}
.us-city.on .us-c{r:5; fill:#00bcb7; stroke:#fff;}
.us-pin{fill:#0b1a24; stroke:#fff; stroke-width:2;}
.us-ring{fill:none; stroke:#00bcb7; stroke-width:1.5; opacity:.5; transform-origin:center; transform-box:fill-box; animation:us-ring 2.4s ease-out infinite;}
@keyframes us-ring{from{transform:scale(.6); opacity:.7;} to{transform:scale(2.6); opacity:0;}}
.us-arcs path{fill:none; stroke:url(#usArc); stroke-width:2; stroke-linecap:round;}
.us-tag{position:absolute; z-index:2; transform:translate(-50%,14px); display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 4px;
  border-radius:99px; background:#0b1a24; color:#fff; font-size:11.5px; font-weight:700; white-space:nowrap;}
.us-tag i{display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#fff; color:#0b1a24; font-style:normal; font-family:var(--pc-display); font-size:11px;}
.us-chip{position:absolute; z-index:3; right:22px; top:16px; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:#fff;
  box-shadow:0 0 0 1px rgba(11,26,36,.06), 0 18px 36px -14px rgba(6,70,100,.3); transition:opacity .35s, transform .35s;}
.us-chip.swap{opacity:0; transform:translateY(-6px);}
.us-chip-dot{width:8px; height:8px; border-radius:50%; background:#1f9d57; box-shadow:0 0 0 4px rgba(31,157,87,.15);}
.us-chip b{display:block; font-size:12.5px; color:#0b1a24;}
.us-chip small{display:block; font-size:11.5px; color:#5b6b78;}
.us-chip em{font-style:normal; font-size:13px; font-weight:800; color:#00726f;}
@media (max-width:1000px){ .ws-map{grid-column:1 / -1;} }
@media (max-width:640px){ .ws-map .ws-stage{min-height:250px;} .us-map{inset:0 6px; width:calc(100% - 12px);} .us-chip{right:12px; top:8px; padding:8px 10px;} }
@media (prefers-reduced-motion:reduce){ .us-ring{animation:none;} }
.us-map{stroke:none;}
.us-dots circle{stroke:none;}
/* washes a step stronger so each card reads as its own color */
.ws-camps{background:radial-gradient(130% 80% at 85% 100%, #c9f0dc 0%, #eefaf3 45%, #fff 80%);}
.ws-news{background:radial-gradient(120% 80% at 15% 100%, #d4ddfa 0%, #eff3fd 45%, #fff 80%);}
.ws-sell{background:radial-gradient(130% 80% at 80% 100%, #fbd9bd 0%, #fff1e5 45%, #fff 80%);}
.ws-hosted{background:radial-gradient(130% 90% at 90% 100%, #c4ecea 0%, #eef9f8 50%, #fff 82%);}
.ws-map{background:radial-gradient(80% 85% at 50% 72%, #d6f2f0 0%, #eef8f8 50%, #fff 85%);}
.ws-news .ws-node em{background:transparent;}
@media (max-width:640px){ .us-chip b{font-size:11.5px;} .us-chip small{font-size:10.5px;} .us-chip{gap:8px;} }

/* ---- US map, second pass: a solid smooth shape, many arcs at once ---- */
.us-shadow{fill:#0b4f5c; opacity:.08; transform:translate(0,6px); filter:blur(6px);}
.us-land{fill:url(#usFill);}
.us-edge{fill:none; stroke:#7fd0cc; stroke-width:1.2; opacity:.9;}
.us-c{fill:#fff; stroke:#00a39e; stroke-width:1.3; r:2.6; transition:r .3s, fill .3s;}
.us-c.on{fill:#00bcb7; stroke:#fff; r:4;}
.us-line{fill:none; stroke:url(#usArc); stroke-width:1.5; stroke-linecap:round; opacity:.85; transition:opacity 1.8s ease;}
.us-line.fade{opacity:0;}
.us-head{fill:#fff; stroke:#00bcb7; stroke-width:2; filter:drop-shadow(0 0 4px rgba(0,188,183,.9));}
.us-pin{fill:#0b1a24; stroke:#fff; stroke-width:2.2; transform-origin:center; transform-box:fill-box;}
.us-pin.hit{animation:us-hit .45s ease-out;}
@keyframes us-hit{40%{transform:scale(1.35);}}
.us-ring.r2{animation-delay:1.2s;}
.us-count{position:absolute; z-index:3; left:24px; bottom:20px; display:flex; flex-direction:column; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 0 0 1px rgba(11,26,36,.06);}
.us-count b{font-size:22px; font-weight:800; letter-spacing:-.02em; color:#0b1a24; font-variant-numeric:tabular-nums;}
.us-count small{font-size:11.5px; color:#5b6b78;}
@media (max-width:640px){ .us-count{left:12px; bottom:10px; padding:7px 10px;} .us-count b{font-size:17px;} }
@media (max-width:640px){ .us-count{left:auto; right:12px; bottom:10px;} }

/* =====================================================================
   US MAP, third pass: real state outlines (us-atlas, Census, public domain,
   Albers USA), pale fills with hairline borders; arcs draw in and retract.
   ===================================================================== */
.ws-map{background:linear-gradient(180deg,#fff 0%,#f6fafb 100%);}
.ws-map .ws-stage{min-height:420px; overflow:hidden;}
.usm{position:absolute; left:4%; right:4%; top:4%; width:92%; height:84%; overflow:visible;}
.usm-s{fill:#e6f1f2; stroke:#fff; stroke-width:.9; stroke-linejoin:round; transition:fill .35s ease;}
.usm-s.home{fill:#cfe9e8;}
.usm-s:hover{fill:#d4ecec;}
.usm-s.home:hover{fill:#bfe2e1;}
.usm-c{fill:#00a39e; opacity:0; transition:opacity .4s, r .4s;}
.usm-c.on{opacity:1;}
.usm-line{fill:none; stroke-width:1.3; stroke-linecap:round;}
.usm-pin{fill:#0b1a24; stroke:#fff; stroke-width:2;}
.usm-ring{fill:none; stroke:#007a76; stroke-width:1.2; opacity:0; transform-origin:center; transform-box:fill-box;}
.usm-ring.go{animation:usm-ring 1.1s ease-out;}
@keyframes usm-ring{0%{opacity:.6; transform:scale(1);} 100%{opacity:0; transform:scale(3.4);}}
.usm-label{font:600 10.5px/1 Archivo, sans-serif; fill:#0b1a24; letter-spacing:.01em;}
.usm-feed{position:absolute; left:28px; bottom:22px; margin:0; display:flex; align-items:center; gap:10px; font-size:13.5px; color:#5b6b78;
  transition:opacity .3s, transform .3s;}
.usm-feed b{color:#0b1a24; font-weight:700;}
.usm-feed i{width:7px; height:7px; border-radius:50%; background:#1f9d57; box-shadow:0 0 0 4px rgba(31,157,87,.14);}
.usm-feed.swap{opacity:0; transform:translateY(4px);}
@media (max-width:640px){
  .ws-map .ws-stage{min-height:260px;}
  .usm{left:3%; right:3%; width:94%; top:2%; height:80%;}
  .usm-feed{left:18px; bottom:14px; font-size:12.5px;}
}
/* the map keeps its own proportions and sits whole inside the card */
.ws-map .ws-stage{min-height:0; flex:1; display:flex; align-items:center; justify-content:center; padding:4px 32px 64px;}
.usm{position:relative; left:auto; right:auto; top:auto; width:100%; max-width:760px; height:auto; display:block;}
.usm-c{stroke:none;}
@media (max-width:640px){ .ws-map .ws-stage{padding:4px 12px 48px;} .usm{width:100%;} }

/* =====================================================================
   WEBSITE CARDS, Stripe-style (2026-10-19): a light title, one focused
   object per card with little text, and one vivid wash of color.
   ===================================================================== */
.ws-grid{gap:20px;}
.ws-card{border:1px solid #e6ebee; border-radius:10px; box-shadow:none; background:#fff; min-height:520px;}
.ws-card:hover{box-shadow:0 24px 50px -28px rgba(11,26,36,.18);}
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .ws-card:hover{transform:none;} .ws-hosted:hover{transform:none;} }
.ws-copy{padding:32px 34px 0;}
.ws-copy h3{max-width:16ch; font-size:clamp(22px,2vw,28px); font-weight:500; line-height:1.18; letter-spacing:-.015em; color:#0b1a24;}
.ws-stage{position:relative; flex:1; min-height:0; margin-top:0; overflow:hidden;}
.ws-stage::before{display:none !important;}
.ws-words,.ws-camps,.ws-news,.ws-sell,.ws-hosted{background:#fff;}
.ws-hosted{display:flex; flex-direction:column;}

/* photos: a vivid teal-blue wave behind the site */
.ws-photos .ws-swoosh path:first-child{fill:#e6f7f6;}
.ws-photos .ws-swoosh linearGradient#wsSwoosh stop{}
.ws-photos .ws-stage{min-height:440px;}

/* words: the field above a live preview of the banner it edits */
.ws-words .ws-stage{display:flex; flex-direction:column; justify-content:center; gap:16px; padding:24px 30px 34px;
  background:radial-gradient(120% 70% at 50% 110%, rgba(0,188,183,.38), rgba(0,188,183,.08) 55%, transparent 75%);}
.wc-edit{padding:16px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px #e6ebee, 0 18px 40px -22px rgba(6,70,100,.35);}
.wc-edit-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.wc-edit-h b{font-size:13.5px; color:#0b1a24;}
.wc-edit label{display:block; margin-bottom:6px; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#62707c;}
.wc-field{display:flex; align-items:center; padding:10px 12px; border-radius:8px; border:1.5px solid #00bcb7; box-shadow:0 0 0 4px rgba(0,188,183,.12);
  font-size:15px; font-weight:600; color:#0b1a24; white-space:nowrap; overflow:hidden;}
.wc-caret{width:1.5px; height:17px; margin-left:1px; background:#0b1a24; animation:pc-blink 1s steps(1) infinite;}
.wc-prev{position:relative; height:150px; overflow:hidden; border-radius:12px; box-shadow:0 18px 40px -22px rgba(6,70,100,.4);}
.wc-prev img{width:100%; height:100%; object-fit:cover; object-position:center 35%;}
.wc-prev::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,10,14,.75), rgba(5,10,14,.1) 70%);}
.wc-prev div{position:absolute; z-index:1; left:18px; top:50%; transform:translateY(-50%); color:#fff; max-width:70%;}
.wc-prev small{font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;}
.wc-prev b{display:block; margin:4px 0 10px; font-family:var(--pc-display); font-weight:400; font-size:24px; line-height:1; text-transform:uppercase;}
.wc-prev span{display:inline-block; padding:5px 12px; border-radius:99px; background:#fff; color:#0b1a24; font-size:10.5px; font-weight:800;}

/* camps: one camp card, lit from behind */
.ws-camps .ws-stage{display:flex; align-items:center; justify-content:center; padding:20px 34px 40px;}
.wc-glow{position:absolute; inset:10% -10% -20% 20%; background:conic-gradient(from 200deg at 60% 60%, #5fd8d4, #00bcb7, #1f6fd1, #7fe0dc, #5fd8d4);
  filter:blur(40px); opacity:.45; border-radius:50%;}
.wc-camp{position:relative; width:100%; max-width:320px; overflow:hidden; border-radius:16px; background:#fff; box-shadow:0 0 0 1px rgba(11,26,36,.06), 0 30px 60px -24px rgba(6,70,100,.45);}
.wc-camp img{display:block; width:100%; height:150px; object-fit:cover;}
.wc-camp-in{padding:16px 18px 18px;}
.wc-status{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px; background:#f1f4f6; font-size:11.5px; font-weight:800; color:#5b6b78; transition:background .4s, color .4s;}
.wc-status i{width:7px; height:7px; border-radius:50%; background:#a3adb6; transition:background .4s;}
.wc-camp.live .wc-status{background:#e7f6ee; color:#127c4c;} .wc-camp.live .wc-status i{background:#1f9d57;}
.wc-camp b{display:block; margin-top:10px; font-size:18px; color:#0b1a24;}
.wc-camp small{display:block; margin-top:2px; font-size:13px; color:#5b6b78;}
.wc-camp-f{display:flex; align-items:center; justify-content:space-between; margin-top:16px;}
.wc-camp-f strong{font-size:17px; color:#0b1a24;}
.wc-pub{padding:8px 16px; border-radius:99px; background:#00807c; color:#fff; font-size:13px; font-weight:800; transition:transform .15s, background .3s;}
.wc-pub.press{transform:scale(.93);}
.wc-camp.live .wc-pub{background:#e7f6ee; color:#127c4c;}

/* news: a stack of posts; the newest slides on top */
.ws-news .ws-stage{display:flex; align-items:center; justify-content:center; padding:20px 30px 40px;
  background:radial-gradient(90% 70% at 50% 60%, rgba(31,111,209,.14), rgba(127,224,220,.10) 50%, transparent 75%);}
.wc-posts{position:relative; width:100%; max-width:300px; height:250px;}
.wc-post{position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column; overflow:hidden; border-radius:14px; background:#fff;
  box-shadow:0 0 0 1px rgba(11,26,36,.06), 0 20px 40px -22px rgba(11,26,36,.35); transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .6s;}
.wc-post img{width:100%; height:130px; object-fit:cover;}
.wc-post div{padding:14px 16px 16px;}
.wc-post small{font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#00726f;}
.wc-post b{display:block; margin-top:4px; font-size:15px; line-height:1.3; color:#0b1a24;}
.wc-post[data-p="0"]{z-index:4; transform:none;}
.wc-post[data-p="1"]{z-index:3; transform:translateY(-14px) scale(.94); opacity:.9;}
.wc-post[data-p="2"]{z-index:2; transform:translateY(-26px) scale(.88); opacity:.6;}
.wc-post[data-p="3"]{z-index:1; transform:translateY(-36px) scale(.82); opacity:0;}
.wc-post.in{animation:wc-in .7s cubic-bezier(.2,.8,.2,1);}
@keyframes wc-in{from{transform:translateY(40px); opacity:0;}}

/* sell: one course card on a warm wave, a purchase pops */
.ws-sell .ws-stage{display:flex; align-items:center; justify-content:center; padding:20px 34px 40px;}
.wc-wave{position:absolute; inset:auto -20% -30% -10%; height:75%; border-radius:50% 50% 0 0;
  background:linear-gradient(110deg, #ffd29a 0%, #ff9f6e 40%, #ff7a8a 70%, #c58cff 100%); filter:blur(30px); opacity:.55; transform:rotate(-8deg);}
.wc-course{position:relative; width:100%; max-width:290px; overflow:hidden; border-radius:16px; background:#fff; box-shadow:0 0 0 1px rgba(11,26,36,.06), 0 30px 60px -24px rgba(120,60,20,.4);}
.wc-course img{display:block; width:100%; height:140px; object-fit:cover; transition:opacity .3s;}
.wc-course-in{padding:16px 18px 18px;}
.wc-course small{font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#b45a1f;}
.wc-course b{display:block; margin-top:4px; font-size:17px; color:#0b1a24;}
.wc-course-f{display:flex; align-items:center; justify-content:space-between; margin-top:16px;}
.wc-course-f strong{font-size:18px; color:#0b1a24;}
.wc-course-f span{padding:8px 16px; border-radius:99px; background:#0b1a24; color:#fff; font-size:13px; font-weight:800;}
.wc-course.swap img,.wc-course.swap .wc-course-in{opacity:.25;}
.wc-course-in{transition:opacity .3s;}
.wc-sale{position:absolute; z-index:3; right:22px; top:16px; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:#fff;
  box-shadow:0 0 0 1px rgba(11,26,36,.06), 0 18px 36px -14px rgba(11,26,36,.3); opacity:0; transform:translateY(-8px); transition:opacity .35s, transform .35s;}
.wc-sale.show{opacity:1; transform:none;}
.wc-sale i{width:8px; height:8px; border-radius:50%; background:#1f9d57; box-shadow:0 0 0 4px rgba(31,157,87,.15);}
.wc-sale b{display:block; font-size:12.5px; color:#0b1a24;} .wc-sale small{display:block; font-size:11.5px; color:#5b6b78;}
.wc-sale em{font-style:normal; font-size:13px; font-weight:800; color:#127c4c;}

/* hosted: a slim live window; new paid registrations slide in */
.ws-hosted .ws-stage{display:flex; align-items:center; justify-content:center; padding:20px 30px 40px;}
.wc-stripes{position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(0,163,158,.32) 0 1px, transparent 1px 9px);
  -webkit-mask-image:linear-gradient(30deg,#000 0%,transparent 55%); mask-image:linear-gradient(30deg,#000 0%,transparent 55%);}
.ws-hosted .ws-stage::after{content:""; position:absolute; right:-20%; top:-10%; width:80%; height:80%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,188,183,.30), transparent); pointer-events:none;}
.wc-host{position:relative; z-index:1; width:100%; max-width:310px; overflow:hidden; border-radius:14px; background:#fff;
  box-shadow:0 0 0 1px rgba(11,26,36,.06), 0 30px 60px -24px rgba(6,70,100,.4);}
.wc-host-bar{display:flex; align-items:center; gap:7px; padding:12px 14px; border-bottom:1px solid #eef1f3; font-size:12.5px; font-weight:700; color:#3b4a57;}
.wc-host-bar svg{width:12px; height:12px; fill:none; stroke:#13804f; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.wc-live{display:inline-flex; align-items:center; gap:5px; margin-left:auto; padding:3px 9px; border-radius:99px; background:#e7f6ee; font-size:11px; font-weight:800; color:#127c4c;}
.wc-live i{width:6px; height:6px; border-radius:50%; background:#1f9d57; animation:wsPulse 1.6s ease-in-out infinite;}
.wc-regs{position:relative; height:186px; overflow:hidden;}
.wc-reg{position:absolute; left:0; right:0; display:flex; align-items:center; gap:10px; height:62px; padding:0 14px; border-bottom:1px solid #f0f2f4;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s;}
.wc-reg i{display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:#00807c; color:#fff; font-style:normal; font-size:12px; font-weight:800;}
.wc-reg span{flex:1; min-width:0;} .wc-reg b{display:block; font-size:13.5px; color:#0b1a24;} .wc-reg small{display:block; font-size:11.5px; color:#5b6b78;}
.wc-reg em{font-style:normal; font-size:13px; font-weight:800; color:#127c4c;}
.wc-reg.new{background:#f2fbfa;}

@media (max-width:1000px){ .ws-card{min-height:0;} .ws-stage{min-height:340px;} .ws-photos .ws-stage{min-height:380px;} }
@media (max-width:640px){
  .ws-copy{padding:26px 24px 0;} .ws-copy h3{font-size:22px;}
  .ws-words .ws-stage,.ws-camps .ws-stage,.ws-news .ws-stage,.ws-sell .ws-stage,.ws-hosted .ws-stage{padding:20px 20px 30px;}
}
@media (prefers-reduced-motion:reduce){ .wc-caret,.wc-live i{animation:none;} }
.wc-status em{font-style:normal;}
/* news: a cool blue-violet glow behind the stack */
.ws-news .ws-stage{background:none;}
.ws-news .ws-stage::after{content:""; position:absolute; inset:18% -15% -25% -15%; border-radius:50%;
  background:conic-gradient(from 120deg at 50% 50%, #9fb7ff, #c7b8ff, #7fd6f0, #9fb7ff); filter:blur(46px); opacity:.5; pointer-events:none; z-index:0;}
.wc-posts{z-index:1;}
.wc-posts{margin-top:30px;}
/* photos: the wave reads as one vivid sweep */
.ws-photos .ws-swoosh{opacity:1;}
.ws-photos .ws-swoosh path:first-child{fill:rgba(127,224,220,.35);}
/* photos: the browser sits on the wave instead of covering it */
@media (min-width:721px){
  .ws-photos .ws-browser{left:34px; top:28px; width:78%; box-shadow:0 0 0 1px rgba(11,26,36,.06), 0 30px 60px -20px rgba(6,70,100,.4);}
  .ws-photos .ws-stage{min-height:420px;}
}
@media (max-width:720px){ .ws-photos .ws-tiles{display:none;} .ws-photos .ws-stage{min-height:260px;} }

/* =====================================================================
   CARD BACKGROUNDS, each its own kind (2026-10-19): ribbon (photos),
   particle spray (edit), light streaks (camps), rising fill (news),
   solid striped block (sell), pulsing rings (hosted).
   ===================================================================== */
/* edit: a spray of fine particles around the editor, drifting slowly */
.ws-words .ws-stage{background:none;}
.wc-spray{position:absolute; left:50%; top:52%; width:130%; height:130%; transform:translate(-50%,-50%); pointer-events:none;}
@media (prefers-reduced-motion:no-preference){ .wc-spray{animation:wc-spin 90s linear infinite;} }
@keyframes wc-spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.wc-edit,.wc-prev{position:relative; z-index:1;}

/* camps: silky light streaks behind the card */
.wc-streaks{position:absolute; inset:-20%; pointer-events:none; transform:rotate(-24deg);}
.wc-streaks i{position:absolute; left:-10%; right:-10%; border-radius:50%; filter:blur(10px);}
.wc-streaks i:nth-child(1){top:30%; height:70px; background:linear-gradient(90deg,transparent,rgba(95,216,212,.75) 35%,rgba(0,188,183,.6) 60%,transparent);}
.wc-streaks i:nth-child(2){top:40%; height:28px; background:linear-gradient(90deg,transparent 10%,rgba(31,111,209,.55) 50%,transparent 90%); filter:blur(6px);}
.wc-streaks i:nth-child(3){top:47%; height:90px; background:linear-gradient(90deg,transparent,rgba(127,224,220,.6) 40%,rgba(31,111,209,.35) 70%,transparent);}
.wc-streaks i:nth-child(4){top:58%; height:14px; background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.95) 50%,transparent 80%); filter:blur(3px);}
.wc-streaks i:nth-child(5){top:63%; height:46px; background:linear-gradient(90deg,transparent,rgba(0,163,158,.45) 45%,transparent);}
@media (prefers-reduced-motion:no-preference){
  .wc-streaks i{animation:wc-streak 9s ease-in-out infinite alternate;}
  .wc-streaks i:nth-child(2n){animation-duration:12s; animation-direction:alternate-reverse;}
}
@keyframes wc-streak{to{transform:translateX(9%);}}
.wc-camp{z-index:1;}

/* news: a solid fill rising from the bottom of the card */
.ws-news .ws-stage::after{inset:auto 0 0 0; height:62%; border-radius:0; filter:none; opacity:1; transform:none;
  background:linear-gradient(180deg, rgba(167,155,255,0) 0%, rgba(167,155,255,.45) 40%, #8f86f5 100%);}

/* sell: a solid warm block with fine stripes; the course card overlaps its edge */
.ws-sell .ws-stage{justify-content:flex-start; padding-left:34px;}
.wc-block{position:absolute; right:0; top:14%; bottom:0; width:58%; border-radius:10px 0 0 0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 1px, transparent 1px 7px), linear-gradient(160deg,#ffc58a 0%,#ff9466 45%,#f2607a 100%);}
.wc-block::before{content:""; position:absolute; left:-40%; top:0; bottom:0; width:40%;
  background:repeating-linear-gradient(135deg, rgba(242,96,122,.35) 0 1px, transparent 1px 7px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000); mask-image:linear-gradient(90deg,transparent,#000);}
.wc-course{max-width:260px;}

/* hosted: thin rings pulsing out from the live window */
.ws-hosted .ws-stage::after{display:none;}
.wc-rings{position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none;}
.wc-rings i{position:absolute; left:-110px; top:-110px; width:220px; height:220px; border-radius:50%; border:1px solid rgba(0,163,158,.35);}
@media (prefers-reduced-motion:no-preference){
  .wc-rings i{animation:wc-ring 6s linear infinite; opacity:0;}
  .wc-rings i:nth-child(2){animation-delay:1.5s;} .wc-rings i:nth-child(3){animation-delay:3s;} .wc-rings i:nth-child(4){animation-delay:4.5s;}
}
@keyframes wc-ring{0%{transform:scale(.6); opacity:0;} 15%{opacity:1;} 100%{transform:scale(2.6); opacity:0;}}
.wc-rings i:nth-child(1){background:radial-gradient(closest-side, rgba(0,188,183,.12), transparent);}
@media (max-width:640px){ .wc-block{width:64%;} .ws-sell .ws-stage{padding-left:20px;} }
.wc-spray{width:118%; height:118%;}
.wc-spray circle{stroke:none;}
/* the spray: a fine, even halo hugging the editor */
.wc-spray{left:50%; top:50%; width:112%; height:auto; aspect-ratio:400/420; transform:translate(-50%,-50%);}
.wc-spray path{fill:none;}
@media (prefers-reduced-motion:no-preference){ .wc-spray{animation:wc-breathe 8s ease-in-out infinite;} }
@keyframes wc-breathe{50%{transform:translate(-50%,-50%) scale(1.025); opacity:.85;}}
.wc-spray{width:98%;}
/* the halo, like Stripe's: a broad band of fine dots with a soft glow filling the ring */
.wc-spray{width:108%; aspect-ratio:400/430; top:52%;}
.ws-words .ws-stage::after{content:""; position:absolute; left:50%; top:52%; width:92%; aspect-ratio:1/1.08; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,188,183,.16), rgba(0,188,183,.07) 55%, rgba(0,188,183,0) 100%); pointer-events:none; z-index:0;}
.wc-spray{z-index:0;}
/* the object sits inside the halo with room to breathe; the halo fits the card */
.ws-words .ws-stage{align-items:center; padding:40px 30px 56px;}
.wc-edit,.wc-prev{width:76%; max-width:340px;}
.wc-prev{height:128px;}
.wc-prev b{font-size:21px;}
.wc-spray{width:100%;}
.ws-words .ws-stage::after{width:86%;}
@media (max-width:640px){ .wc-edit,.wc-prev{width:84%;} }

/* US map drawn as fine dots on a canvas; the SVG on top keeps the arcs and the pin */
.usm-dots{position:absolute; z-index:0; pointer-events:none;}
.usm{z-index:1;}
.usm-s,.usm-s.home,.usm-s:hover,.usm-s.home:hover{fill:transparent; stroke:none;}
.ws-map .ws-stage{cursor:crosshair;}

/* registrations as dotted comets; the camp as a dotted orbit, matching the dot map */
.usm-comet circle{transition:none;}
.usm-burst{fill:none; stroke:#00a39e; stroke-width:1.1; stroke-dasharray:0 2.6; stroke-linecap:round; transform-origin:center; transform-box:fill-box;
  animation:usm-burst 1.2s ease-out forwards;}
@keyframes usm-burst{from{transform:scale(1); opacity:.9;} to{transform:scale(5.5); opacity:0;}}
.usm-orbit{fill:none; stroke:#007a76; stroke-linecap:round; transform-origin:center; transform-box:fill-box;}
.usm-orbit.o1{stroke-width:1.4; stroke-dasharray:0 3.1; opacity:.85;}
.usm-orbit.o2{stroke-width:1.1; stroke-dasharray:0 3.6; opacity:.4;}
@media (prefers-reduced-motion:no-preference){
  .usm-orbit.o1{animation:usm-orbit 14s linear infinite;}
  .usm-orbit.o2{animation:usm-orbit 22s linear infinite reverse;}
}
@keyframes usm-orbit{to{transform:rotate(360deg);}}
.usm-pin{fill:#007a76; stroke:#fff; stroke-width:1.6;}
.usm-label{font:800 8.5px/1 Archivo, sans-serif; letter-spacing:.14em; fill:#00726f; paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round;}
.usm-ring{stroke:#00bcb7;}
.usm-orbit.o1{stroke-width:1.8; opacity:1;}
.usm-orbit.o2{stroke-width:1.4; opacity:.55;}

/* registrations: one fine line per registration, a ring at its city and a tag */
.usm-line{fill:none; stroke-width:1.25; stroke-linecap:round;}
.usm-origin{fill:#fff; stroke:#007a76; stroke-width:1.3;}
.usm-arc{transition:opacity .9s ease;}
.usm-arc.out{opacity:0;}
.usm-tag{position:absolute; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; background:#fff;
  box-shadow:0 0 0 1px rgba(11,26,36,.07), 0 8px 20px -8px rgba(11,26,36,.25); white-space:nowrap; pointer-events:none;
  transform:translate(-50%, calc(-100% - 10px)) translateY(4px); opacity:0; transition:opacity .4s ease, transform .4s ease;}
.usm-tag.on{opacity:1; transform:translate(-50%, calc(-100% - 10px));}
.usm-tag.r{transform:translate(0, calc(-100% - 10px)) translateY(4px);} .usm-tag.r.on{transform:translate(0, calc(-100% - 10px));}
.usm-tag b{font-size:12px; font-weight:600; color:#0b1a24;}
.usm-tag em{font-style:normal; font-size:12px; font-weight:700; color:#007a76;}
.ws-map .ws-stage{padding-bottom:40px;}
@media (max-width:640px){ .usm-tag{padding:4px 8px; gap:6px;} .usm-tag b,.usm-tag em{font-size:10.5px;} }
/* phones: just the amount, in a compact pill */
.usm-tag.sm{padding:3px 7px; border-radius:6px;}
.usm-tag.sm b{display:none;}
.usm-tag.sm em{font-size:10.5px;}

/* "Pick your sport" chips */
.pk-sports{display:flex; flex-wrap:wrap; gap:8px;}
.pk-sports button{padding:8px 14px; border:1px solid #d9e2e6; border-radius:99px; background:#fff; font:600 14px/1 Archivo, sans-serif; color:#3b4a57;
  cursor:pointer; transition:background .2s, color .2s, border-color .2s;}
.pk-sports button:hover{border-color:#00807c; color:#0b1a24;}
.pk-sports button.on{background:#0b1a24; border-color:#0b1a24; color:#fff;}
.pk-sports button:focus-visible{outline:2px solid var(--pc-button); outline-offset:3px;}
.pk-brand-k.pk-k2{margin-top:24px;}
.pk-brand-art img{transition:opacity .2s;}
.pk-brand-art.pk-swap img,.pk-brand-art.pk-swap [data-s]{opacity:.35;}
.pk-brand-art [data-s]{transition:opacity .2s;}

/* =====================================================================
   "ONE CAMP OR FIFTY", third pass (2026-10-19): steps never change height
   (nothing jumps); the active one reads dark with a line filling down its
   left edge. The form sits on a striped teal-blue panel; a pill slides
   between its tabs and the panes cross-fade.
   ===================================================================== */
.rs-one .rs-one-in{align-items:start;}
.rs-one .rs-items{gap:0; padding-top:40px;}
.rs-one .rs-item,.rs-one .rs-item.on{padding:22px 0 22px 26px; border:0; border-radius:0; background:none; box-shadow:none; cursor:pointer;}
.rs-one .rs-item::before{content:""; position:absolute; left:0; top:22px; bottom:22px; width:2px; border-radius:2px; background:#e3e9ec; opacity:1;}
.rs-one .rs-item + .rs-item::before{left:0; right:auto; top:22px; height:auto;}
.rs-one .rs-item::after{left:0; right:auto; top:22px; bottom:22px; width:2px; height:auto; transform:scaleY(0); transform-origin:50% 0;
  background:linear-gradient(180deg,#00bcb7,#00807c); opacity:1;}
.rs-one .rs-item.on.is-timed::after{animation:rs-down var(--rs-dur,3600ms) linear forwards;}
.rs-one .rs-item.done::after{transform:none;}
@keyframes rs-down{to{transform:scaleY(1);}}
.rs-one .rs-item p{max-height:none; margin-top:8px; opacity:1; color:#62707c; transition:color .4s;}
.rs-one .rs-item b{color:#62707c; transition:color .4s;}
.rs-one .rs-n{color:#c3ccd3;}
.rs-one .rs-item.on b{color:var(--pc-ink);}
.rs-one .rs-item.on p{color:var(--pc-text);}
.rs-one .rs-item.on .rs-n{color:var(--pc-teal-text);}
.rs-one .rs-item:hover b{color:var(--pc-ink);}

/* the form on a striped panel */
.rs-layer{display:none;}
.rs-stack{padding:44px 0 0 44px; isolation:isolate;}
.rs-stack::before{content:""; position:absolute; z-index:-1; left:0; top:0; right:-6%; bottom:-44px; border-radius:16px;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 1px, transparent 1px 8px), linear-gradient(150deg,#7fe0dc 0%,#00bcb7 40%,#1f6fd1 100%);}
.rs-front{border-radius:12px; background:#f6f7f9; box-shadow:0 0 0 1px rgba(11,26,36,.06), 0 30px 60px -20px rgba(6,40,80,.45);}
.rs-tabs{position:relative; isolation:isolate;}
.rs-tabs i,.rs-tabs i.on{position:relative; z-index:1; background:none; transition:color .35s;}
.rs-tabs i.on{color:#fff;}
.rs-pill{position:absolute; z-index:0; left:3px; top:3px; bottom:3px; width:0; border-radius:6px; background:var(--sc-teal);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1);}
.rs-pane{transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);}
.rs-pane{transform:translateY(10px);} .rs-pane.on{transform:none;} .rs-pane.out,.rs-pane.out-r{transform:translateY(-8px);}
@media (max-width:960px){ .rs-stack{padding:24px 0 0 20px;} .rs-stack::before{right:0; bottom:-24px;} .rs-one .rs-items{padding-top:8px;} }
@media (prefers-reduced-motion:reduce){ .rs-pill,.rs-pane{transition:none;} .rs-one .rs-item.on::after{animation:none; transform:none;} }
.rs-stack::before{right:0;} .rs-stack{padding-right:44px;}
@media (max-width:960px){ .rs-stack{padding-right:20px;} }

/* =====================================================================
   CHECKOUT BAND, calmer (2026-10-19): no rings or radial glow. Faint
   vertical guide lines and one soft teal-blue glow rising from the floor;
   a smaller phone and a shorter pinned stage.
   ===================================================================== */
.rs-three::before,.rs-three .rs-co-stage::before,.rs-three .rs-co-stage::after{content:none; display:none;}
.rs-three{background:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/25% 100%,
    radial-gradient(70% 55% at 30% 115%, rgba(0,188,183,.30), rgba(31,111,209,.14) 45%, transparent 75%),
    #0b1a24;}
.rs-three .pc-wrap{position:relative;}
.pc-page .rs-co-phone.sc-phone{width:270px; zoom:1;}
.rs-co-in .rs-co-screens{height:300px;}
.rs-co-toast{left:240px; width:250px; bottom:18%;}
@media (min-width:961px){
  .rs-three.is-pinned .rs-three-in{height:calc(100vh - 128px + 60vh);}
  .rs-three.is-pinned .rs-stick{min-height:560px; max-height:760px;}
}
@media (max-width:960px){ .pc-page .rs-co-phone.sc-phone{width:250px; zoom:.9;} }
.pc-page .rs-co-phone.sc-phone{width:280px;}
.rs-co-in .rs-co-screens{height:332px;}
.rs-co-camp small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;}
/* the glow lives on the pinned stage, so it is always in view behind the phone */
.rs-three{background:linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0/25% 100%, #0b1a24;}
.rs-stick{position:relative; isolation:isolate;}
.rs-stick::before{content:""; position:absolute; z-index:-1; left:-10%; right:40%; bottom:0; height:70%; pointer-events:none;
  background:radial-gradient(60% 70% at 45% 100%, rgba(0,188,183,.34), rgba(31,111,209,.14) 50%, transparent 78%);}

/* =====================================================================
   CHECKOUT STEPS as a Stripe-style list (2026-10-19): all three always
   visible, the active one bright with a teal line filling down its left
   edge; a "Registered" line lights at the end. No pinning, no wheel.
   ===================================================================== */
.rs-three{padding:clamp(88px,9vw,120px) 0;}
.rs-three .rs-three-in{height:auto !important;}
.rs-three .rs-stick{position:relative !important; top:auto !important; height:auto !important; min-height:0 !important; max-height:none !important;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(36px,6vw,80px); align-items:center;}
.rs-three .rs-copy{display:block;}
.rs-three .rs-co-steps{position:static !important; height:auto !important; margin:36px 0 0 !important; padding:0 !important;
  -webkit-mask-image:none !important; mask-image:none !important; perspective:none;}
.rs-three .rs-co-steps .rs-item{position:relative !important; left:auto !important; right:auto; top:auto !important; transform:none !important; opacity:1 !important;
  display:block; margin:0; padding:18px 0 18px 26px; border:0; border-radius:0; background:none; min-height:0; cursor:pointer; will-change:auto;}
.rs-three .rs-co-steps .rs-item b{font-size:19px; line-height:1.3; color:rgba(255,255,255,.55); transition:color .4s;}
.rs-three .rs-co-steps .rs-item b::before,.rs-three .rs-co-steps .rs-item b::after{display:none !important;}
.rs-three .rs-co-steps .rs-item p{max-height:none !important; margin:6px 0 0 !important; opacity:1 !important; font-size:15px; line-height:1.6; color:rgba(255,255,255,.42); transition:color .4s;}
.rs-three .rs-co-steps .rs-item::before{content:""; position:absolute; left:0; top:18px; bottom:18px; width:2px; border-radius:2px; background:rgba(255,255,255,.12);}
.rs-three .rs-co-steps .rs-item::after{content:""; position:absolute; left:0; top:18px; bottom:18px; width:2px; border-radius:2px; background:#5fd8d4;
  transform:scaleY(0); transform-origin:50% 0;}
.rs-three .rs-co-steps .rs-item.on b{color:#fff;}
.rs-three .rs-co-steps .rs-item.on p{color:rgba(255,255,255,.78);}
.rs-three .rs-co-steps .rs-item.on.is-timed::after{animation:rs-down var(--rs-dur,2800ms) linear forwards;}
.rs-three .rs-co-steps .rs-item.done::after{transform:none; animation:none;}
.rs-three.is-paused .rs-co-steps .rs-item.on.is-timed::after{animation-play-state:paused;}
.rs-three .rs-co-steps .rs-item:hover b{color:#fff;}
.rs-co-end{display:flex; align-items:center; gap:10px; margin:14px 0 0 26px; font-size:14px; font-weight:700; color:rgba(255,255,255,.3); transition:color .4s;}
.rs-co-end i{display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.08); transition:background .4s;}
.rs-co-end i::after{content:""; width:11px; height:11px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.4 7.4 5.9 9.8 10.8 4.2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.4 7.4 5.9 9.8 10.8 4.2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;}
.rs-three.is-done .rs-co-end{color:#5fd8d4;}
.rs-three.is-done .rs-co-end i{background:rgba(95,216,212,.18);}
.rs-three .rs-stick::before{bottom:-10%;}
@media (max-width:960px){
  .rs-three .rs-stick{display:flex; flex-direction:column; gap:32px;}
  .rs-three .rs-copy{display:contents;}
  .rs-three .rs-copy .pc-sh{order:-2;} .rs-three .rs-co-art{order:-1;}
  .rs-three .rs-co-steps{margin:0 !important;}
  .rs-co-end{margin-top:4px;}
}
@media (prefers-reduced-motion:reduce){ .rs-three .rs-co-steps .rs-item.on::after{animation:none; transform:none;} }
@media (max-width:960px){ .rs-three .rs-co-steps .rs-item,.rs-three .rs-co-steps .rs-item.on{background:none !important; border:0 !important; padding:16px 0 16px 22px;} .rs-co-end{align-self:flex-start; margin:0 0 0 22px;} }

/* camp marker: a plain map pin and a white tag, no rings (2026-10-19) */
.usm-pin{fill:none; stroke:none;}
.usm-shadow{fill:#0b1a24; opacity:.18;}
.usm-drop{fill:#0d1b2a; stroke:#fff; stroke-width:1.4; stroke-linejoin:round;}
.usm-dot{fill:#fff;}
.usm-marker{transform-box:fill-box; transform-origin:50% 100%;}
.usm-marker > *{transform-box:fill-box; transform-origin:50% 100%;}
.usm-marker.go .usm-drop, .usm-marker.go .usm-dot{animation:usm-land .5s cubic-bezier(.3,1.6,.5,1);}
@keyframes usm-land{0%{transform:scale(1);} 35%{transform:scale(1.12,.9);} 100%{transform:scale(1);}}
.usm-marker.go .usm-dot{transform-origin:50% 50%; animation-name:usm-dot;}
@keyframes usm-dot{0%{fill:#fff;} 30%{fill:#5fd4cf;} 100%{fill:#fff;}}
.usm-tag-camp rect{fill:#fff; filter:drop-shadow(0 2px 5px rgba(13,27,42,.16)) drop-shadow(0 0 .5px rgba(13,27,42,.3));}
.usm-tag-camp text{font:700 10px/1 Archivo, sans-serif; fill:#0d1b2a; text-anchor:middle; letter-spacing:.01em;}
@media (prefers-reduced-motion:reduce){ .usm-marker.go .usm-drop, .usm-marker.go .usm-dot{animation:none;} }
.usm-grow{transform-box:view-box; transform-origin:0 0;}
@media (max-width:700px){ .usm-grow{transform:scale(1.8);} }

/* hosted, round 2 (Mehul 2026-10-22: the rings did not match the cards beside it): the same language as the coaching
   content card next to it, a solid block with fine stripes, here in brand teal and mirrored to the left, with the live
   window overlapping its edge */
.wc-rings{left:0; top:auto; bottom:0; width:58%; height:78%; border-radius:0 10px 0 0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.2) 0 1px, transparent 1px 7px), linear-gradient(200deg,#5fe0d4 0%,#14a39b 45%,#007a76 100%);}
.wc-rings::before{content:""; position:absolute; right:-40%; top:0; bottom:0; width:40%;
  background:repeating-linear-gradient(45deg, rgba(0,122,118,.3) 0 1px, transparent 1px 7px);
  -webkit-mask-image:linear-gradient(270deg,transparent,#000); mask-image:linear-gradient(270deg,transparent,#000);}
.wc-rings i{display:none !important;}
.ws-hosted .ws-stage{justify-content:flex-end; padding-right:34px;}
.wc-host{box-shadow:0 30px 60px -28px rgba(0,60,58,.45), 0 0 0 1px rgba(13,27,42,.06);}
@media (max-width:640px){ .wc-rings{width:64%;} .ws-hosted .ws-stage{padding-right:20px;} }

/* hosted, round 3 (Mehul 2026-10-22: the striped teal block did not work either): the same quiet fill as the news card,
   rising from the bottom, here in brand teal, with the live window centred over it */
.wc-rings{left:0; right:0; width:auto; top:auto; bottom:0; height:62%; border-radius:0;
  background:linear-gradient(180deg, rgba(95,216,207,0) 0%, rgba(95,216,207,.42) 40%, #2fb3a9 100%);}
.wc-rings::before{content:none;}
.ws-hosted .ws-stage{justify-content:center; padding-right:30px;}

/* "Built for camp season" band, round 2 (Mehul 2026-10-22: too big, and the dark fade over a field drawing looked off):
   a compact rounded panel inside the page width, deep brand teal lit from the top right in the Payments band colours,
   no picture, the line centred */
.pc-band{min-height:0; display:block; width:min(1200px, calc(100% - 48px)); margin:clamp(56px,7vw,96px) auto; padding:clamp(48px,6vw,76px) 24px;
  border-radius:24px; text-align:center;
  background:radial-gradient(60% 90% at 88% 0%, rgba(33,227,210,.45), transparent 60%), radial-gradient(50% 80% at 100% 100%, rgba(90,111,240,.28), transparent 65%),
    radial-gradient(45% 70% at 0% 100%, rgba(0,60,58,.5), transparent 70%), linear-gradient(120deg,#05514f 0%,#007a76 55%,#0b8a84 100%);
  box-shadow:0 40px 80px -48px rgba(0,60,58,.6);}
.pc-band img{display:none;}
.pc-band::after{content:none !important;}
.pc-band-in{padding:0;}
.pc-band-title{font-size:clamp(34px,4vw,56px); line-height:1;}
.pc-band-title span{display:inline; color:#8ff7ec; text-shadow:none;}
.pc-band p{margin:14px auto 0; color:rgba(255,255,255,.85);}
@media (max-width:640px){ .pc-band{width:calc(100% - 32px); border-radius:18px;} .pc-band-title span{display:block;} }

/* camp season band, round 3 (Mehul 2026-10-22: "sharpen it, too simple"): the season itself across the panel, four
   frosted steps on one line from registration to payout, a light pulse running along the line, and a fine hairline
   texture in the panel */
.pc-band{position:relative; overflow:hidden; isolation:isolate;}
.pc-band::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 8px);
  -webkit-mask-image:radial-gradient(80% 90% at 50% 0%, #000, transparent 75%); mask-image:radial-gradient(80% 90% at 50% 0%, #000, transparent 75%);}
.sz{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; max-width:940px; margin:clamp(32px,4vw,48px) auto 0; padding:0; list-style:none; text-align:left;}
.sz::before{content:""; position:absolute; left:12%; right:12%; top:27px; height:1px; background:rgba(255,255,255,.28);}
.sz::after{content:""; position:absolute; left:12%; top:26px; width:14%; height:3px; border-radius:3px;
  background:linear-gradient(90deg, transparent, #8ff7ec, transparent); filter:drop-shadow(0 0 6px rgba(143,247,236,.9));}
@media (prefers-reduced-motion:no-preference){ .sz::after{animation:sz-run 4.8s cubic-bezier(.45,0,.3,1) infinite;} }
@keyframes sz-run{0%{left:10%; opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{left:76%; opacity:0;}}
.sz li{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 6px;}
.sz-ic{position:relative; z-index:1; display:grid; place-items:center; width:54px; height:54px; border-radius:16px;
  background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.35), 0 14px 28px -16px rgba(0,30,30,.6);}
.sz li:last-child .sz-ic{background:#fff; box-shadow:0 14px 30px -14px rgba(0,30,30,.7);}
.sz-ic svg{width:22px; height:22px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.sz li:last-child .sz-ic svg{stroke:#007a76;}
.sz b{margin-top:14px; font-size:15px; font-weight:600; color:#fff;}
.sz small{margin-top:3px; font-size:13px; color:rgba(255,255,255,.72);}
@media (max-width:760px){
  .sz{grid-template-columns:1fr 1fr; row-gap:26px;}
  .sz::before, .sz::after{display:none;}
}

/* small camp thumbnails in the phone and checkout drawings (Mehul 2026-10-23): no image, just the text row */
.mp-camp img, .rs-co-camp img{display:none;}
.mp-camp{padding:9px 12px;}

/* camp season band, round 4 (Mehul 2026-10-23: the teal gradient read as AI): a light Stripe-style panel. Pale #f6f9fc
   with a hairline, the title in ink with the teal second half, white step tiles with teal icons on a hairline track, the
   payout tile in solid brand teal. No gradient, no texture, no glow. */
.pc-band{background:#f6f9fc !important; box-shadow:inset 0 0 0 1px #e6ebef !important; color:#0b1a24;}
.pc-band::before{content:none !important;}
.pc-band-title{color:#0b1a24 !important;} .pc-band-title span{color:#007a76 !important;}
.pc-band p{color:#56677a !important;}
.sz::before{background:#d5dde3;}
.sz::after{background:#007a76; filter:none; height:2px; top:26.5px;}
.sz-ic{background:#fff !important; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 0 0 1px #e6ebef, 0 6px 14px -8px rgba(13,40,60,.25) !important;}
.sz-ic svg{stroke:#007a76 !important;}
.sz li:last-child .sz-ic{background:#007a76 !important; box-shadow:0 8px 18px -8px rgba(0,80,78,.5) !important;}
.sz li:last-child .sz-ic svg{stroke:#fff !important;}
.sz b{color:#0b1a24 !important;} .sz small{color:#62707c !important;}

/* news / sell / hosted row (Mehul 2026-10-26: "cards too big for the images, highlight the inner image, the
   background should not eat attention"): shorter cards, bigger inner cards, and the colour blocks pulled back to
   a soft low wash so the drawn card is the focus. */
@media (min-width:1001px){
  .ws-news,.ws-sell,.ws-hosted{min-height:440px;}
  .ws-news .ws-stage,.ws-sell .ws-stage,.ws-hosted .ws-stage{padding:8px 32px 32px;}
}
.wc-posts{max-width:330px; height:260px; margin-top:18px;}
.wc-post img{height:140px;}
.wc-course{max-width:310px;}
.wc-host{max-width:340px;}
.ws-sell .ws-stage{justify-content:center; padding-left:32px;}
.wc-post,.wc-course,.wc-host{box-shadow:0 0 0 1px rgba(13,27,42,.07), 0 30px 60px -30px rgba(13,40,60,.45);}
/* backgrounds: a quiet wash from the bottom only, in a light tint, no stripes */
.ws-news .ws-stage::after{height:45%; background:linear-gradient(180deg, rgba(167,155,255,0) 0%, rgba(167,155,255,.22) 100%);}
.wc-block{top:auto; height:45%; width:100%; border-radius:0; background:linear-gradient(180deg, rgba(255,166,120,0) 0%, rgba(255,166,120,.24) 100%);}
.wc-block::before{content:none;}
.wc-rings{height:45%; background:linear-gradient(180deg, rgba(95,216,207,0) 0%, rgba(95,216,207,.26) 100%);}
@media (min-width:1001px){
  .ws-card.ws-news .ws-stage,.ws-card.ws-sell .ws-stage,.ws-card.ws-hosted .ws-stage{min-height:340px;}
  .ws-card.ws-news,.ws-card.ws-sell,.ws-card.ws-hosted{min-height:0;}
}

/* same treatment for the other cards (Mehul 2026-10-26): the drawn screen leads, the art behind it goes quiet */
/* photos: the bright teal-to-blue swoosh becomes a faint wash */
.ws-photos .ws-swoosh{opacity:.16;}
.ws-photos .ws-stage{background:none;}
/* edit: the dot spray and its halo fade right back; the two cards a touch larger */
.wc-edit,.wc-prev{width:82%; max-width:360px; box-shadow:0 0 0 1px rgba(13,27,42,.07), 0 30px 60px -30px rgba(13,40,60,.45);}
/* publish: the streaks drop to a soft haze; the camp card a touch larger */
.wc-streaks{opacity:.28;}
.wc-camp{max-width:320px; box-shadow:0 0 0 1px rgba(13,27,42,.07), 0 30px 60px -30px rgba(13,40,60,.45);}
/* map: the dots carry the card, so the card just loses some empty height */
@media (min-width:1001px){
  .ws-card.ws-words .ws-stage{padding:20px 30px 36px;}
  .ws-card.ws-camps .ws-stage{min-height:340px; padding:10px 32px 32px;}
}
/* map + publish row shorter (Mehul 2026-10-26): less empty card around the map and the camp card */
@media (min-width:1001px){
  .ws-card.ws-map,.ws-card.ws-camps{min-height:0;}
  .ws-card.ws-map .ws-stage{padding:28px 40px 24px;}
  .ws-card.ws-map .usm{max-width:560px;}
  .ws-card.ws-camps .ws-stage{min-height:0; padding:8px 32px 28px;}
}
/* photos + edit row shorter too (Mehul 2026-10-26); the edit card keeps its original dot spray */
@media (min-width:1001px){
  .ws-card.ws-photos,.ws-card.ws-words{min-height:0;}
  .ws-card.ws-photos .ws-stage{min-height:380px;}
  .ws-card.ws-words .ws-stage{min-height:380px; padding:8px 30px 28px;}
}

/* ===== switching mid-season (Mehul 2026-10-26). White, hairlines, one teal accent: a season line with the switch
   point, three plain steps, and the real Upload Camper pop-up drawn at work. No gradients or glows. */
.mx{--ink:#0b1a24; --mut:#5b6b78; --ln:#e3e9ed; --tl:#007a76; background:#fff; border-top:1px solid #edf1f4;}
.mx-season{margin-top:56px;}
.mx-months{display:grid; grid-template-columns:repeat(4,1fr); font:600 12px/1 Archivo,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#62707c;}
.mx-months span{padding-left:2px; border-left:1px solid var(--ln); padding:0 0 12px 10px;}
.mx-track{position:relative; height:46px;}
.mx-track i{position:absolute; top:22px; height:2px;}
.mx-track i.old{left:0; width:38%; background:repeating-linear-gradient(90deg,#b9c4cc 0 6px,transparent 6px 11px);}
.mx-track i.new{left:38%; right:0; background:var(--tl);}
.mx-track b.c{position:absolute; top:17px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 2px #b9c4cc;}
.mx-track b.c.on{box-shadow:inset 0 0 0 2px var(--tl);}
.c1{left:8%;} .c2{left:19%;} .c3{left:30%;} .c4{left:47%;} .c5{left:60%;} .c6{left:74%;} .c7{left:88%;}
.mx-pin{position:absolute; left:38%; top:-34px; transform:translateX(-50%); padding:6px 12px 7px; border-radius:6px; background:var(--ink); color:#fff; font-size:13px; font-weight:600; white-space:nowrap;}
.mx-pin small{display:block; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#9fe3df;}
.mx-pin::after{content:""; position:absolute; left:50%; bottom:-38px; width:2px; height:38px; margin-left:-1px; background:var(--ink);}
.mx-legend{display:grid; grid-template-columns:38% 62%; font-size:13.5px; color:var(--mut);}
.mx-legend .new{padding-left:16px; color:var(--tl); font-weight:600;}
.mx-in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:72px; align-items:center; margin-top:64px;}
.mx-steps{margin:0; padding:0; list-style:none; border-top:1px solid var(--ln);}
.mx-steps li{display:grid; grid-template-columns:44px 1fr; padding:22px 0; border-bottom:1px solid var(--ln);}
.mx-steps li i{grid-row:span 2; font:600 13px/1.6 "JetBrains Mono",ui-monospace,monospace; font-style:normal; color:var(--tl);}
.mx-steps b{font-size:17px; font-weight:600; color:var(--ink);}
.mx-steps p{margin:6px 0 0; font-size:15px; line-height:1.6; color:var(--mut);}
.mx-ui{border-radius:8px; background:#fff; overflow:hidden; font-size:13px; color:var(--ink);
  box-shadow:0 0 0 1px rgba(11,26,36,.08), 0 2px 4px rgba(11,26,36,.04), 0 40px 80px -48px rgba(11,26,36,.45);}
.mx-ui .h{padding:18px 22px 16px; border-bottom:1px solid var(--ln);}
.mx-ui .h b{display:block; font-size:16px;} .mx-ui .h small{display:block; margin-top:3px; color:var(--mut);}
.mx-steps2{display:flex; gap:8px; flex-wrap:wrap; padding:14px 22px 0;}
.mx-steps2 span{display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:6px; background:#f3f6f8; font-size:12px; font-weight:600; color:var(--mut);}
.mx-steps2 i{width:14px; height:14px; border-radius:50%; background:var(--tl); position:relative;}
.mx-steps2 i::after{content:""; position:absolute; left:4px; top:2.5px; width:3.5px; height:6.5px; border:solid #fff; border-width:0 1.6px 1.6px 0; transform:rotate(45deg);}
.mx-file{display:flex; align-items:center; gap:12px; margin:14px 22px 0; padding:11px 12px; border:1px solid var(--ln); border-radius:6px;}
.mx-file em{display:grid; place-items:center; width:34px; height:34px; border-radius:5px; background:#e3f4f2; color:var(--tl); font-style:normal; font-size:10px; font-weight:700;}
.mx-file span{font-weight:600;} .mx-file small{display:block; font-weight:400; color:var(--mut);}
.mx-found{padding:16px 22px 0;} .mx-found > b{font-size:13.5px;}
.mx-sum{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px;}
.mx-sum span{padding:10px 12px; border-radius:6px; background:#f6f8fa; font-size:12px; color:var(--mut);}
.mx-sum strong{display:block; font-size:20px; font-weight:600; color:var(--ink);}
.mx-sum .g{background:#eef8f7;} .mx-sum .g strong{color:var(--tl);}
.mx-t{margin:14px 22px 0;}
.mx-r{display:grid; grid-template-columns:1.4fr 1fr auto; align-items:center; gap:10px; padding:9px 0; border-top:1px solid #eef2f4;}
.mx-r.hd{border-top:0; padding-top:4px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#62707c;}
.mx-r .a{display:flex; align-items:center; gap:9px; font-weight:600;}
.mx-r .a em{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#e3f4f2; color:var(--tl); font-style:normal; font-size:10px; font-weight:700;}
.mx-r .p{color:var(--mut);}
.mx-r .st{padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600;}
.mx-r .st.ok{background:#e6f4ec; color:#1d6b40;} .mx-r .st.dup{background:#f3f6f8; color:var(--mut);}
.mx-ui .f{margin-top:14px; padding:12px 22px; background:#f6f8fa; border-top:1px solid var(--ln); font-size:12.5px; color:var(--mut);}
@media (max-width:1000px){ .mx-in{grid-template-columns:minmax(0,1fr); gap:44px;} }
@media (max-width:640px){
  .mx-months{font-size:10.5px; letter-spacing:.06em;} .mx-legend{grid-template-columns:1fr; gap:4px;} .mx-legend .new{padding-left:0;}
  .mx-ui .h,.mx-steps2,.mx-found,.mx-ui .f{padding-left:16px; padding-right:16px;} .mx-file,.mx-t{margin-left:16px; margin-right:16px;}
  .mx-r{grid-template-columns:1.3fr auto;} .mx-r .p{display:none;}
}
/* months under the line, the switch marker above it with room; Jun 9 sits at its real place in May-Aug */
.mx-season{display:flex; flex-direction:column; padding-top:48px;}
.mx-track{order:1;} .mx-months{order:2; margin-top:-4px;} .mx-legend{order:3; margin-top:14px;}
.mx-months span{padding:10px 0 0 10px;}
.mx-track i.old{width:32%;} .mx-track i.new{left:32%;}
.mx-pin{left:32%; top:-46px;} .mx-pin::after{bottom:-24px; height:24px;}
.c1{left:7%;} .c2{left:15%;} .c3{left:24%;} .c4{left:42%;} .c5{left:57%;} .c6{left:72%;} .c7{left:87%;}
.mx-legend{grid-template-columns:32% 68%;}
.mx .mx-in{margin-top:56px;}

/* sharper corners across the page (Mehul 2026-10-26), same pattern as the homepage and About: 8px on large
   frames, 6px on small cards. Phone mock-ups keep their rounded device shape. */
main .pc-window,main .ws-card,main .wc-camp,main .pk-site,main .pc-band,main .rh-browser,main .rs-front{border-radius:8px;}
main .wc-edit,main .wc-prev,main .wc-post,main .wc-course,main .wc-sale,main .wc-host,main .pk-s-card,main .rs-slab-face,
main .rs-co-who,main .rs-co-chk,main .rs-co-sign,main .rs-co-pol,main .rs-co-toast{border-radius:6px;}
main .rh-list{border-radius:0 0 6px 6px;}
main .pc-hero-reg .rh-browser{border-radius:8px;} main .pc-hero-reg .rh-list{border-radius:0 0 6px 6px;}

/* ---- smaller "Change anything" cards (Mehul 2026-10-27): rows about 360px instead of 500, the wide cards put
   the title beside the picture, and every drawn screen shows whole instead of cropped at the card edge ---- */
@media (min-width:1001px){
  main .ws-grid{gap:16px;}
  main .ws-grid .ws-card{min-height:0;}
  main .ws-grid .ws-copy{padding:26px 28px 0;}
  main .ws-grid .ws-copy h3{font-size:22px;}
  main .ws-grid .ws-card .ws-stage{min-height:0;}

  /* wide cards: title left, screen right */
  main .ws-grid .ws-photos,main .ws-grid .ws-map{display:grid; grid-template-columns:220px minmax(0,1fr); align-items:stretch;}
  main .ws-grid .ws-photos .ws-stage{display:flex; align-items:center; padding:26px 28px 26px 0; overflow:visible;}
  main .ws-grid .ws-photos .ws-swoosh{display:none;}
  main .ws-grid .ws-photos .ws-browser{position:relative; left:auto; top:auto; width:100%;
    box-shadow:0 0 0 1px rgba(11,26,36,.05), 0 20px 40px -24px rgba(6,70,100,.35);}
  main .ws-grid .ws-photos .ws-tiles{display:none;}
  main .ws-grid .ws-map .ws-stage{padding:22px 28px 22px 0;}
  main .ws-grid .ws-map .usm{max-width:470px;}

  /* narrow cards: tighter stages and shorter pictures */
  main .ws-grid .ws-words .ws-stage{padding:14px 28px 24px; gap:12px;}
  main .ws-grid .ws-camps .ws-stage{padding:14px 28px 24px;}
  main .ws-grid .wc-camp{max-width:300px;}
  main .ws-grid .wc-camp img{height:96px;}
  main .ws-grid .wc-camp-in{padding:12px 16px 14px;}
  main .ws-grid .wc-camp-f{margin-top:10px;}
  main .ws-grid .ws-news,main .ws-grid .ws-sell,main .ws-grid .ws-hosted{min-height:0;}
  main .ws-grid .ws-news .ws-stage,main .ws-grid .ws-sell .ws-stage,main .ws-grid .ws-hosted .ws-stage{min-height:0; padding:14px 28px 26px;}
  main .ws-grid .wc-post img{height:96px;}
  main .ws-grid .wc-course img{height:96px;}
}

/* "Change anything" cards (2026-10-28): the pictures are plain colour blocks, so each one carries a
   tag naming the sport, and on phones and tablets the block is a short banner, not half the card */
.wc-camp,.wc-course{position:relative;}
.wc-tag{position:absolute; left:16px; top:14px; z-index:2; display:flex; flex-direction:column; gap:3px; color:#fff; pointer-events:none;}
.wc-tag small{font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.8;}
.wc-tag b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:22px; line-height:1; letter-spacing:.01em; text-transform:uppercase;}
@media (max-width:1000px){
  main .ws-grid .wc-camp img,main .ws-grid .wc-post img,main .ws-grid .wc-course img,
  .wc-camp img,.wc-post img,.wc-course img{height:84px !important;}
  .wc-tag{top:13px;}
}
main .wc-tag small,main .wc-tag b{color:#fff !important; margin:0 !important; display:block;}
main .wc-tag small{color:rgba(255,255,255,.78) !important; font-size:9.5px !important; letter-spacing:.14em !important;}
main .wc-tag b{font-size:22px !important; line-height:1 !important; margin-top:3px !important;}
@media (max-width:1000px){
  main .ws-grid .ws-card.ws-camps .ws-stage,main .ws-grid .ws-card.ws-sell .ws-stage{min-height:0 !important; padding:14px 20px 28px;}
  main .ws-grid .ws-card.ws-news .ws-stage{min-height:236px !important; padding:44px 20px 28px;}
}
/* "It looks like your program" on phones (2026-10-28): ten sport chips in four rows, the colours and the checklist
   pushed the camp site a screen below, so picking a sport changed something out of view. Sports become one row you
   swipe, colours one row, the site right under them, and the checklist after it. */
@media (max-width:640px){
  .pk-brand-in{display:flex !important; flex-direction:column;}
  .pk-brand-copy{display:contents;}
  .pk-brand .pc-sh{order:1;}
  .pk-brand .pk-brand-k{order:2; margin-top:22px;}
  .pk-brand .pk-sports{order:3; flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--pc-gutter, 20px)); padding:2px var(--pc-gutter, 20px) 4px;}
  .pk-brand .pk-sports::-webkit-scrollbar{display:none;}
  .pk-brand .pk-sports button{flex:none; white-space:nowrap;}
  .pk-brand .pk-k2{order:4; margin-top:14px;}
  .pk-brand .pk-swatches{order:5;}
  .pk-brand .pk-brand-art{order:6; margin-top:22px;}
  .pk-brand .pc-checks{order:7; margin-top:22px;}
}
@media (max-width:640px){
  .pk-brand-in{align-items:stretch; min-width:0;}
  .pk-brand-in > *,.pk-brand .pk-brand-copy > *{min-width:0; max-width:100%;}
  .pk-brand .pk-sports{max-width:none; width:auto; align-self:stretch;}
}
@media (max-width:640px){
  .pk-brand .pk-brand-k{margin:20px 0 0 !important;}
  .pk-brand .pk-sports,.pk-brand .pk-swatches{margin-top:10px !important;}
  .pk-brand .pk-k2{margin-top:16px !important;}
  .pk-brand .pk-brand-art{margin-top:20px !important;}
}
@media (max-width:640px){ .pk-brand-in{gap:0 !important;} }
/* "One camp or fifty" on phones (2026-10-28): all three steps showed their paragraph, so the screen above scrolled away
   by step three. Only the live step keeps its paragraph; the others are their titles. */
@media (max-width:640px){
  .rs-one .rs-item{margin-bottom:18px;}
  .rs-one .rs-item:not(.on) p{display:none;}
}
/* No status dots (Mehul 2026-11-04): the Draft / Open for registration pill, the Live pill and the New purchase
   note carry their meaning in words, so the little green dots go. */
.wc-status i,.wc-live i,.wc-sale i{display:none;}