/* BLACKNUNITED forms: join, contact, story, thank-you. Owned by the forms work. Uses the inner.css tokens. */
/* two clear choices at the top */
.choice{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px;max-width:920px}
.choice button{position:relative;text-align:left;min-height:124px;border:3px solid var(--ink);border-radius:26px;padding:20px 24px 20px 24px;background:var(--bone);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:background .25s,color .25s,transform .25s}
.choice button:hover{transform:translateY(-3px)}
.choice .k{font:700 16px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.choice b{font:400 clamp(28px,3vw,42px)/1 var(--disp);text-transform:uppercase}
.choice small{font:600 17px/1.35 var(--body)}
.choice button[aria-pressed=true]{background:var(--ink);color:var(--bone)}
.choice button[aria-pressed=true] .k{color:var(--sun)}
.choice button[aria-pressed=true]::after{content:"Selected";position:absolute;right:20px;top:18px;font:700 16px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--sun);border-radius:var(--r-tag);padding:7px 12px}
/* layout: form + aside */
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:40px;align-items:start}
.fside{display:grid;gap:14px}
.fside .role{cursor:default}
.fside .role h3{font-size:clamp(26px,2.4vw,34px)}
.fside .role p{font-size:18px}
/* the form */
.fm{background:var(--ink);color:var(--bone);border-radius:30px;padding:34px 34px 38px}
.fm h2{font:400 clamp(34px,3.6vw,52px)/1 var(--disp);text-transform:uppercase}
.fm .intro{margin-top:12px;font-size:19px;max-width:30em}
.fm fieldset{border:0;padding:0;min-width:0}
.fld{display:grid;gap:8px;margin-top:20px}
.fld>label,.fld>legend{font:700 18px/1.2 var(--body)}
.fld .req{color:var(--sun);font-weight:700}
.fld .opt{font-weight:500;color:#a8a8a2}
.hint{font-size:16px;line-height:1.4;color:#a8a8a2}
.fld input[type=text],.fld input[type=tel],.fld input[type=email],.fld select,.fld textarea{width:100%;min-height:56px;padding:0 16px;border:2px solid var(--bone);border-radius:16px;background:var(--bone);color:var(--ink);font-size:18px}
.fld textarea{min-height:170px;padding:14px 16px;line-height:1.5;resize:vertical}
.fld select{appearance:none;-webkit-appearance:none;padding-right:48px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M2 2l8 8 8-8' fill='none' stroke='%230a0a0a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.two-f{align-items:start;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.err{display:none;font:700 17px/1.35 var(--body);color:var(--sun)}
.err::before{content:"Needs a fix: ";text-transform:uppercase;letter-spacing:.06em;font-size:16px}
.fld.bad .err,.chk.bad .err{display:block}
.fld.bad input,.fld.bad select,.fld.bad textarea{border:4px solid var(--sun);box-shadow:0 0 0 3px var(--ink)}
/* checkboxes and radios */
.chk{display:grid;grid-template-columns:30px 1fr;gap:4px 16px;align-items:start;margin-top:14px;padding:16px 18px;border:2px solid rgba(245,245,242,.4);border-radius:18px;cursor:pointer;position:relative}
.chk:hover{border-color:var(--bone)}
.chk input{appearance:none;-webkit-appearance:none;width:30px;height:30px;margin:2px 0 0;border:2.5px solid var(--bone);border-radius:9px;background:transparent;display:grid;place-content:center;cursor:pointer}
.chk input::after{content:"";width:16px;height:9px;border-left:4px solid var(--ink);border-bottom:4px solid var(--ink);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.chk input:checked{background:var(--sun);border-color:var(--sun)}
.chk input:checked::after{opacity:1}
.chk input:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.chk .t{font:600 17px/1.45 var(--body)}
.chk .t small{display:block;font:400 16px/1.45 var(--body);color:#c9c9c3;margin-top:4px}
.chk .err{grid-column:2}
.chk.bad{border:3px solid var(--sun)}
.consent{margin-top:26px;padding-top:22px;border-top:2px solid rgba(245,245,242,.3)}
.consent .hd{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.consent h3{font:400 28px/1 var(--disp);text-transform:uppercase}
.consent .tag{color:var(--sun);border-color:var(--sun);padding:6px 10px}
.consent p.note{margin-top:10px;font-size:16px;color:#c9c9c3;max-width:40em}
.consent a{color:var(--sun)}
.fm .only{margin-top:24px;padding:16px 18px;border-radius:18px;background:var(--raised);border:2px solid var(--sun);font-weight:600;font-size:17px;line-height:1.45}
.fm .only b{color:var(--sun)}
.sendrow{margin-top:26px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.sendrow .btn{min-width:280px;background:var(--sun);color:var(--ink);border-color:var(--sun)}
.sendrow .btn[disabled]{cursor:progress;transform:none}
.sendrow .sendmsg{font-weight:600;font-size:17px}
.spin{display:none;width:20px;height:20px;border:3px solid var(--ink);border-right-color:transparent;border-radius:50%;margin-right:12px;animation:sp .8s linear infinite}
.fm.sending .spin{display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.fm.sending fieldset{opacity:.6}
/* error summary */
.errsum{display:none;margin-top:22px;padding:18px 20px;border-radius:20px;border:3px solid var(--sun);background:var(--raised)}
.fm.has-err .errsum{display:block}
.errsum h3{font:400 30px/1 var(--disp);text-transform:uppercase;color:var(--sun)}
.errsum ul{margin-top:10px;display:grid;gap:2px}
.errsum a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--bone);text-underline-offset:4px}
/* panel switching on join */
.pn[hidden]{display:none}
.stand[hidden]{display:none}
/* state labels for design review */
.statebar{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
/* what happens next */
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:36px;counter-reset:n}
.next li{counter-increment:n;border:2px solid var(--bone);border-radius:24px;padding:22px 24px;display:grid;gap:8px;align-content:start;transition:background .3s,color .3s}
.next li:hover{background:var(--bone);color:var(--ink)}
.next li::before{content:counter(n);font:400 56px/1 var(--disp);color:var(--sun)}
.next li:hover::before{color:var(--ink)}
.next h3{font:400 clamp(26px,2.4vw,34px)/1 var(--disp);text-transform:uppercase}
.next p{font-size:18px;line-height:1.45}
.honest{margin-top:26px;font:600 19px/1.45 var(--body);max-width:40em}
.honest b{color:var(--sun)}
/* thank-you */
.ty-mark{display:inline-grid;place-content:center;width:84px;height:84px;border-radius:50%;background:var(--ink);margin-bottom:22px}
.ty-mark svg{width:42px;height:42px}
.ty-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.ty-links .btn{min-height:var(--h-btn)}
.mocknote{margin-top:22px;font-weight:600;font-size:17px}
@media(max-width:1100px){.fgrid{grid-template-columns:1fr}.next{grid-template-columns:1fr}}
@media(max-width:900px){
 .choice{grid-template-columns:1fr;gap:10px;margin-top:22px}
 .choice button{min-height:96px;padding:16px 18px}
 .choice button[aria-pressed=true]::after{right:14px;top:14px}
 .fm{padding:22px 18px 26px;border-radius:24px}
 .two-f{grid-template-columns:1fr}
 .sendrow .btn{width:100%;min-width:0}
 .ty-links .btn{width:100%}
 .ty-mark{width:68px;height:68px}
}
@media(prefers-reduced-motion:reduce){.spin{animation:none;border-right-color:var(--ink)}}
.still .spin{animation:none!important}
.nav ul a.join[aria-current=page]{background:var(--ink);color:var(--bone)}

.ty-links [hidden]{display:none}