/* /Join/ — national join page. Builds on the global design system (assets/css/site-chrome.css, _design/COMPONENTS.md).
   Page-specific parts only: hero intro, six paths, "Bring 500" band, join form layout, county / school-district combobox. */
/* Hero intro (above the fold only; .fx = motion allowed) */
.fx .phero .rv{animation:fade .9s var(--ease) both}
.fx .phero .rv:nth-child(2){animation-delay:.08s}
.fx .phero .rv:nth-child(3){animation-delay:.16s}
.fx .phero .rv:nth-child(4){animation-delay:.24s}
.fx .phero .rv:nth-child(5){animation-delay:.32s}
.fx .phero .phero-fig.rv{animation-delay:.25s}
.phero .acts{margin-top:32px}
.phero-grid .p{margin-top:16px}
.phero-grid .lede{max-width:30em}

/* Find your place */
.paths{margin-top:clamp(48px,5vw,72px)}
.paths .card .h3{text-transform:none}
.callout-red .p{margin:0;max-width:46em;color:#fff}
.callout-red .p b{color:#fff;font-weight:500}
.state-callout{margin-top:clamp(40px,4vw,64px)}
.participation{margin-top:clamp(40px,4vw,64px)}
.participation .h3{font-size:clamp(24px,2.2vw,32px)}

/* Form section */
.join-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.join-intro{position:sticky;top:140px}
.join-intro .free-note{margin-top:28px;display:inline-block;padding:8px 14px;border:1px solid var(--red);color:var(--red);font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.join-split>.form{padding:clamp(24px,3.2vw,48px);background:var(--paper);border:1px solid var(--line)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
.fields>.full,.fields>.form-section{grid-column:1/-1}
.fields>div{min-width:0}
.form-section{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.form-section:first-child{margin-top:0}
.form-section h3{font-family:var(--serif);font-weight:700;font-size:clamp(21px,1.8vw,25px);line-height:1.2;letter-spacing:-.015em;color:var(--navy)}
.form .small{margin:0;font-size:13px;font-weight:400;line-height:1.5;color:var(--slate)}
.form label .small{margin-left:4px}
.form .check-label{margin:0 0 12px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.form .checks label{display:flex;align-items:flex-start;margin:0;padding:14px 16px;border:1px solid var(--steel);background:var(--white);font-size:15.5px;font-weight:400;line-height:1.4;color:var(--navy);cursor:pointer;transition:border-color .25s,background-color .25s}
.form .checks label:hover{border-color:var(--navy)}
.form .checks label:has(input:checked){border-color:var(--red);background:var(--tint)}
.form .checks input[type="checkbox"]{margin-top:1px}
.form .consent{display:flex;align-items:flex-start}
.form .consent label{margin:0;font-size:15px;line-height:1.5}
.form .consent input[type="checkbox"]{margin-top:2px}
.form .disclaimer{margin-top:16px;max-width:40em}
.form .form-alert{margin:0 0 16px}
.form button[type="submit"]{margin-top:6px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:960px){
  .join-split{grid-template-columns:minmax(0,1fr)}
  .join-intro{position:static}
}
@media (max-width:640px){
  .fields{grid-template-columns:minmax(0,1fr)}
  .checks{grid-template-columns:minmax(0,1fr)}
  .join-split>.form{padding:22px 18px}
  .form button[type="submit"]{width:100%}
}

/* Geo combobox (state-driven county / school district search; hooks of assets/js/geo-picker.js) */
.geo-combobox{position:relative}
.geo-results{position:absolute;z-index:50;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;border:1px solid var(--steel);background:var(--white)}
.geo-results[hidden]{display:none}
.geo-result{padding:12px 16px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.4;color:var(--navy);cursor:pointer}
.geo-result:last-child{border-bottom:0}
.geo-result:hover,.geo-result.is-active{background:var(--paper);color:var(--red)}
.geo-status{margin-top:6px;font-size:13px;color:var(--slate)}
.geo-status:empty{display:none}