/* Become a customer — the buyer-side sibling of /partners, and deliberately built from the same
   tokens as _partners3.css (#635bff, the skewed gradient wash, 99px pill buttons) so the two
   "Become a…" pages read as a matched pair rather than two different products. */
:root{
  --bc-ink:#0a2540;--bc-grey:#425466;--bc-grey-l:#697386;--bc-line:#e0e4ea;--bc-hair:#eef1f5;
  --bc-brand:#635bff;--bc-brand-h:#7a73ff;--bc-panel:#f6f9fc;--bc-green:#1F7A43;
  --bc-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",system-ui,sans-serif;
}
.bc *{box-sizing:border-box}
.bc{font-family:var(--bc-sans);color:var(--bc-ink);-webkit-font-smoothing:antialiased}

/* ---- hero, on the same skewed wash as /partners ---- */
.bc-hero{position:relative;padding:clamp(70px,11vw,132px) 0 clamp(44px,7vw,84px);overflow:visible}
.bc-grad{position:absolute;left:0;right:0;top:-260px;height:calc(100% + 250px);
  transform:skewY(-6deg);transform-origin:0 0;overflow:hidden;
  background:linear-gradient(100deg,#a960ee 0%,#ff8a5c 32%,#ffcb57 56%,#90e0ff 82%);
  opacity:.13;pointer-events:none}
.bc-in{position:relative;max-width:1000px;margin:0 auto;padding:0 24px}
.bc-eyebrow{font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--bc-brand);margin-bottom:14px}
.bc-hero h1{font-size:clamp(38px,5.6vw,66px);font-weight:650;letter-spacing:-.032em;line-height:1.04;max-width:16ch}
.bc-hero h1 em{font-style:normal;background:linear-gradient(90deg,#635bff,#00d4ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bc-hero .lead{margin:22px 0 0;max-width:52ch;font-size:clamp(17px,1.7vw,20px);color:var(--bc-grey);line-height:1.5}

/* ---- compliance row: real certifications, stated plainly ---- */
.bc-trust{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.bc-trust span{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--bc-line);
  border-radius:99px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--bc-grey)}
.bc-trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bc-green)}

/* ---- two-column: form beside what-happens-next ---- */
.bc-body{position:relative;max-width:1000px;margin:0 auto;padding:0 24px clamp(70px,10vw,120px)}
.bc-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(26px,4vw,56px);align-items:start}
@media(max-width:900px){.bc-cols{grid-template-columns:1fr}}

/* ---- the form card ---- */
.bc-card{background:#fff;border:1px solid var(--bc-hair);border-radius:20px;
  padding:clamp(22px,3vw,32px);box-shadow:0 2px 5px rgba(10,37,64,.04),0 14px 40px rgba(10,37,64,.07)}
.bc-steps{display:flex;gap:10px;margin:0 0 24px}
.bc-steps div{flex:1;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--bc-grey-l);
  border-top:3px solid var(--bc-hair);padding-top:11px;transition:color .2s,border-color .2s}
.bc-steps div.on{color:var(--bc-ink);border-top-color:var(--bc-brand)}
.bc-steps b{display:flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;
  background:var(--bc-hair);color:var(--bc-grey-l);font-size:12px;flex:none;transition:background .2s,color .2s}
.bc-steps div.on b{background:var(--bc-brand);color:#fff}
.bc-card h2{font-size:22px;font-weight:650;letter-spacing:-.018em;margin-bottom:6px}
.bc-card .sub{font-size:14.5px;color:var(--bc-grey);line-height:1.5;margin-bottom:22px}
.bc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.bc-row{grid-template-columns:1fr}}
.bc-field{display:block;margin-bottom:14px}
.bc-field>span{display:block;font-size:12.5px;font-weight:600;color:var(--bc-grey);margin-bottom:6px}
.bc-field input,.bc-field textarea,.bc-field select{width:100%;font-family:var(--bc-sans);font-size:15px;
  color:var(--bc-ink);border:1px solid var(--bc-line);border-radius:10px;padding:11px 13px;outline:none;
  background:#fff;resize:vertical;transition:border-color .15s,box-shadow .15s}
.bc-field input:focus,.bc-field textarea:focus,.bc-field select:focus{
  border-color:var(--bc-brand);box-shadow:0 0 0 3px rgba(99,91,255,.16)}
.bc-btn{width:100%;font-family:var(--bc-sans);font-size:15.5px;font-weight:600;color:#fff;background:var(--bc-brand);
  border:0;border-radius:99px;padding:13px 22px;cursor:pointer;margin-top:8px;transition:background .18s}
.bc-btn:hover{background:var(--bc-brand-h)}
.bc-btn:disabled{opacity:.55;cursor:default}
.bc-skip{display:block;width:100%;text-align:center;background:none;border:0;font-family:var(--bc-sans);
  font-size:13.5px;color:var(--bc-grey-l);margin-top:13px;cursor:pointer;text-decoration:underline}
.bc-msg{font-size:13.5px;color:var(--bc-grey);margin-top:12px;min-height:19px;text-align:center}
.bc-msg.err{color:#b0392a}
/* Honeypot: positioned off-screen rather than display:none — some bots skip hidden fields but
   happily fill positioned ones, which is the point. */
.bc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- what happens next ---- */
.bc-side h3{font-size:15px;font-weight:650;letter-spacing:-.01em;margin-bottom:18px}
.bc-next{list-style:none;margin:0 0 30px;padding:0}
.bc-next li{position:relative;padding:0 0 22px 34px}
.bc-next li:last-child{padding-bottom:0}
.bc-next li::before{content:counter(bcstep);counter-increment:bcstep;position:absolute;left:0;top:-1px;
  width:23px;height:23px;border-radius:50%;background:var(--bc-brand);color:#fff;
  font-size:12px;font-weight:650;display:flex;align-items:center;justify-content:center}
.bc-next li:not(:last-child)::after{content:"";position:absolute;left:11px;top:26px;bottom:4px;
  width:1px;background:var(--bc-line)}
.bc-next{counter-reset:bcstep}
.bc-next b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.005em}
.bc-next span{display:block;font-size:13.5px;color:var(--bc-grey);line-height:1.5;margin-top:3px}
.bc-quiet{background:var(--bc-panel);border-radius:14px;padding:18px 20px;font-size:13.5px;
  color:var(--bc-grey);line-height:1.55}
.bc-quiet b{color:var(--bc-ink);font-weight:650}
.bc-quiet a{color:var(--bc-brand);text-decoration:none;font-weight:600}
.bc-quiet a:hover{text-decoration:underline}

/* ---- done ---- */
.bc-done{text-align:center;padding:14px 0 6px}
.bc-done .tick{width:54px;height:54px;border-radius:50%;background:#edf7f0;color:var(--bc-green);
  display:flex;align-items:center;justify-content:center;margin:0 auto 17px}
.bc-done .tick svg{width:27px;height:27px}
.bc-done h2{font-size:24px;font-weight:650;letter-spacing:-.02em}
.bc-done p{font-size:15px;color:var(--bc-grey);line-height:1.55;margin-top:11px;max-width:40ch;
  margin-left:auto;margin-right:auto}
.bc-done a{color:var(--bc-brand);text-decoration:none;font-weight:600}
.bc-done a:hover{text-decoration:underline}
.bc-foot{margin-top:34px;font-size:13.5px;color:var(--bc-grey-l);text-align:center}
.bc-foot a{color:var(--bc-brand);text-decoration:none;font-weight:600}
.bc-foot a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.bc *{transition:none!important}}