/* Buyer registration (/join/buyer/*), on top of creator-join.css: Create Your Buyer Account with its benefits panel, Verify Your Email
   Address and the Your Email Is Verified! welcome (approved designs, 31 Oct). */
.bj-title{display:flex;align-items:center;gap:14px;margin:0;font:700 clamp(30px,3.6vw,46px)/1.1 var(--cj-head)}
.bj-title-ico{display:grid;place-items:center;width:62px;height:62px;flex:none;border-radius:50%;background:var(--cj-pink);color:#fff}
.bj-title-ico .ico{width:32px;height:32px}
.bj-account .cj-lead{margin:8px 0 16px}

/* With a Buyer Account, You Can... */
.bj-benefits .cj-summary-head{padding:16px 20px}
.bj-list{list-style:none;margin:0;padding:14px 18px 6px;display:grid;gap:14px}
.bj-list li{display:grid;grid-template-columns:28px 54px minmax(0,1fr);align-items:center;gap:12px}
.bj-list h3{margin:0;font:700 18px/1.25 var(--cj-head)}
.bj-list p{margin:2px 0 0;font-size:14.5px;color:var(--cj-muted)}
.bj-tick{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--cj-cyan);color:#fff}
.bj-tick .ico{width:16px;height:16px;stroke-width:3}
.bj-ico{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--cj-pink-soft);color:var(--cj-pink)}
.bj-ico .ico{width:26px;height:26px}
.bj-art{display:block;width:100%;height:auto;margin-top:10px;aspect-ratio:962/614;object-fit:cover;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%);mask-image:linear-gradient(to bottom,transparent,#000 18%)}

/* Verify Your Email Address for Your Buyer Account! */
.bj-verify,.bj-welcome{max-width:820px;margin:12px auto;padding:22px clamp(18px,4vw,44px) 30px;text-align:center}
.bj-verify h1,.bj-welcome h1{margin:0 0 8px;font:700 clamp(28px,3.4vw,44px)/1.12 var(--cj-head)}
.bj-verify h1 .pink,.bj-welcome h1 .pink{display:block}
.bj-box{display:flex;gap:20px;align-items:flex-start;margin:18px 0;padding:18px 22px;border:1px solid #bfeef4;border-radius:16px;background:var(--cj-cyan-soft);text-align:left}
.bj-box-ico{display:grid;place-items:center;width:78px;height:78px;flex:none;border-radius:50%;background:var(--cj-pink-soft);color:var(--cj-navy)}
.bj-box-ico .ico{width:40px;height:40px}
.bj-box h2{margin:0;font:700 24px var(--cj-head)}
.bj-box-sub{margin:0 0 8px;font-size:17px}
.bj-checks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bj-checks li{position:relative;padding-left:36px;line-height:1.4}
.bj-checks li::before{content:"";position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:50%;background:var(--cj-cyan)}
.bj-checks li::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.bj-email{word-break:break-all}
.bj-check-now{min-width:min(100%,360px);margin:4px auto 0}
.bj-verify .cj-resend{margin-top:20px}

/* Your Email Is Verified! */
.bj-done{display:block;width:220px;height:120px;margin:0 auto 6px}
.bj-done .disc{fill:var(--cj-cyan)}
.bj-done .tick{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.bj-done g path{fill:none;stroke-width:6;stroke-linecap:round}
.bj-done .burst-l path:nth-child(1),.bj-done .burst-r path:nth-child(3){stroke:var(--cj-pink)}
.bj-done .burst-l path:nth-child(2),.bj-done .burst-r path:nth-child(2){stroke:var(--cj-cyan)}
.bj-done .burst-l path:nth-child(3),.bj-done .burst-r path:nth-child(1){stroke:var(--cj-navy)}
.bj-hi{margin:10px 0 2px;font:700 22px var(--cj-head)}
.bj-features{list-style:none;margin:22px 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.bj-features li{display:flex;align-items:center;gap:12px;padding:6px 14px;font:700 17px/1.25 var(--cj-head);text-align:left}
.bj-features li+li{border-left:2px solid #9be8f3}
.bj-feature-ico{display:grid;place-items:center;width:64px;height:64px;flex:none;border-radius:50%;background:var(--cj-pink-soft);color:var(--cj-pink)}
.bj-feature-ico .ico{width:30px;height:30px}
.bj-start{max-width:520px;font-size:20px}
.bj-continue{margin:12px 0 0;font-weight:700}

@media (max-width:720px){
  .bj-features{grid-template-columns:1fr;gap:8px}
  .bj-features li+li{border-left:0;border-top:1px solid #c9eef4;padding-top:12px}
  .bj-box{flex-direction:column;align-items:center;text-align:left}
  .bj-list li{grid-template-columns:24px 46px minmax(0,1fr)}
  .bj-ico{width:46px;height:46px}
}