/* The site's forms (join-us.html, signup.html), in the calculator's card style. The choices
   are the calculator's pills (.pc-chip in css/home.css), 48px tall here for thumbs. */
.jf-split { display: grid; gap: 40px 72px; align-items: start; }
@media (min-width: 960px) { .jf-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .jf-head { position: sticky; top: calc(var(--nav-h) + 32px); } }
.jf-head .section-title { margin-bottom: 24px; }
.jf-head .split-side { justify-self: start; }
.jf-head .split-side a { color: inherit; font-weight: 600; }

.jf, .jf-done { padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--bdr); box-shadow: var(--sh-md); }
.jf { display: grid; gap: 24px; }
.jf-row { display: grid; gap: 24px; }
@media (min-width: 600px) { .jf-row { grid-template-columns: 1fr 1fr; } }
.jf-field label, .jf-set legend { display: block; margin: 0 0 10px; padding: 0; font-size: 16px; font-weight: 600; color: var(--tx); }
.jf-opt { font-weight: 400; color: var(--txm); }
.jf-field input, .jf-field textarea { display: block; width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--bdr); background: var(--page); color: var(--tx); font: 400 16px/1.4 var(--font); }
.jf-field textarea { min-height: 120px; padding: 14px 16px; resize: vertical; }
.jf-field input::placeholder, .jf-field textarea::placeholder { color: var(--txd); }
.jf-field input:focus, .jf-field textarea:focus { outline: none; border-color: var(--rg); box-shadow: 0 0 0 3px rgba(12,11,9,.12); }
.jf-zip input { max-width: 200px; }
.jf-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.jf .pc-chip span { min-height: 48px; padding: 0 18px; font-size: 15px; }
.jf [aria-invalid] input, .jf input[aria-invalid], .jf textarea[aria-invalid] { border-color: #B42318; }
.jf-set[aria-invalid] legend { color: #B42318; }
.jf-err { min-height: 0; margin: 0; color: #B42318; font-weight: 600; }
.jf-err:empty { display: none; }
.jf-send { justify-self: start; }
.jf-send[disabled] { opacity: .6; cursor: default; }
.jf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jf-done h3 { margin: 0 0 12px; font-size: clamp(28px, 3vw, 36px); letter-spacing: -.03em; }
.jf-done p { margin: 0 0 24px; color: var(--txm); }
.jf-done p a { color: inherit; font-weight: 600; }