/* Step-by-step application. Base rules group the form into four labeled parts (works without JavaScript);
   .ap-on rules apply once step-apply.js turns the parts into one step at a time. */
.ap-lead{margin:-6px 0 22px;font-size:15px;color:#3b4654}
.ap-step{border:0;margin:0 0 30px;padding:0;min-width:0}
.ap-step legend{padding:0;margin:0 0 16px;display:block;width:100%}
.ap-num{display:block;font:600 11px/1.3 'Segoe UI',Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#a24a1c;margin-bottom:6px}
.ap-legend{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:#0e2a47}
.ap-hint{font-size:15px;line-height:1.5;color:#3b4654;margin:-6px 0 20px}

/* Progress */
.ap-progress{margin:0 0 26px}
.ap-progress-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px 18px;flex-wrap:wrap;margin-bottom:12px}
.ap-count,.ap-free{margin:0;font-size:14px;line-height:1.4}
.ap-count{font-weight:700;color:#0e2a47}
.ap-free{color:#1d6b43;font-weight:600}
.ap-free::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#2e8c5a;margin-right:8px;vertical-align:1px}
.ap-bar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ap-bar li{min-width:0}
.ap-bar-fill{display:block;height:6px;border-radius:3px;background:#cfd5db}
.ap-bar li[data-state=done] .ap-bar-fill{background:#0e2a47}
.ap-bar li[data-state=now] .ap-bar-fill{background:#e8743c}
.ap-bar-label{display:block;margin-top:7px;font-size:12px;line-height:1.3;color:#5b6676;overflow-wrap:anywhere}
.ap-bar li[data-state=now] .ap-bar-label{color:#0e2a47;font-weight:700}

/* Tap-to-choose answers */
.ap-choices{display:grid;gap:10px}
.ap-choices .ap-choice{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;padding:14px 16px;border:1.5px solid #9da8b1;border-radius:8px;background:#fff;cursor:pointer;font-size:16px;font-weight:500;line-height:1.35;color:#11161f;margin:0}
.ap-choices .ap-choice input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;padding:0;border:2px solid #637b91;border-radius:50%;background:#fff;display:grid;place-content:center;cursor:pointer}
.ap-choices .ap-choice input::before{content:"";width:10px;height:10px;border-radius:50%;background:#e8743c;transform:scale(0)}
.ap-choices .ap-choice input:checked{border-color:#0e2a47}
.ap-choices .ap-choice input:checked::before{transform:scale(1)}
.ap-choices .ap-choice:has(input:checked){border-color:#0e2a47;background:#eef3f8;box-shadow:inset 4px 0 0 #e8743c}
.ap-choices .ap-choice:hover{border-color:#0e2a47}
.ap-choices .ap-choice input:focus-visible{outline:3px solid #e8743c;outline-offset:3px}
.field.ap-has-choices>label{margin-bottom:12px}

/* Quick answers for the open questions */
.ap-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ap-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:1.5px solid #637b91;border-radius:999px;background:#fff;color:#0e2a47;font-size:14px;line-height:1.25;cursor:pointer;text-align:left;max-width:100%}
.ap-chip-mark{flex:none;width:14px;height:14px;position:relative}
.ap-chip-mark::before,.ap-chip-mark::after{content:"";position:absolute;left:6px;top:0;width:2px;height:14px;background:currentColor;border-radius:1px}
.ap-chip-mark::after{transform:rotate(90deg)}
.ap-chip[aria-pressed=true]{background:#0e2a47;border-color:#0e2a47;color:#fff}
.ap-chip[aria-pressed=true] .ap-chip-mark::before{left:2px;top:5px;height:8px;transform:rotate(-45deg)}
.ap-chip[aria-pressed=true] .ap-chip-mark::after{left:8px;top:1px;height:12px;transform:rotate(45deg)}
.ap-chip:hover{border-color:#0e2a47}
.ap-chip:focus-visible,.ap-back:focus-visible,.ap-next:focus-visible{outline:3px solid #e8743c;outline-offset:3px}

/* Step navigation */
.ap-nav{display:flex;align-items:center;gap:12px;margin-top:8px}
.formbox .ap-nav .ap-next{width:auto;flex:1}
.ap-back{min-height:48px;padding:12px 18px;border:1.5px solid #637b91;border-radius:4px;background:transparent;color:#0e2a47;font-weight:600;cursor:pointer}
.ap-back:hover{border-color:#0e2a47;background:#fff}
.ap-nav-last{margin:0 0 14px}

/* Step 4 recap of the first three steps (built by step-apply.js) */
.ap-recap{margin:6px 0 18px;padding:12px 14px 4px;border:1.5px solid #cfd5db;border-radius:8px;background:#fff}
.ap-recap-title{margin:0;font-size:16px;font-weight:700;line-height:1.3;color:#0e2a47}
.ap-recap-note{margin:2px 0 6px;font-size:13px;line-height:1.4;color:#3b4654}
.ap-recap-list{list-style:none;margin:0;padding:0}
.ap-recap-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"step edit" "answers answers";align-items:center;column-gap:12px;margin:0;padding:6px 0 9px;border-top:1px solid #e3e7eb}
.ap-recap-step{grid-area:step;min-width:0;font-size:13px;font-weight:700;line-height:1.3;color:#5b6676}
.ap-recap-answers{grid-area:answers;min-width:0;display:block;font-size:15px;line-height:1.4;color:#11161f;overflow-wrap:anywhere}
.ap-recap-label,.ap-recap-sep{color:#5b6676}
.ap-edit{grid-area:edit;min-height:32px;padding:4px 2px 4px 10px;border:0;background:transparent;color:#0e2a47;font-size:14px;font-weight:600;line-height:1.2;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ap-edit:hover{color:#a24a1c}
.ap-edit:focus-visible{outline:3px solid #e8743c;outline-offset:2px;border-radius:2px}

/* One step at a time once the script runs */
.ap-on .ap-lead,.ap-on .ap-num{display:none}
.ap-on .ap-step{margin-bottom:12px}
.ap-on .ap-step:focus{outline:none}
.ap-step.ap-enter{animation:ap-in .26s ease-out}
@keyframes ap-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ap-step.ap-enter{animation:none}}

@media(max-width:760px){
 .ap-legend{font-size:20px}
 .ap-bar-label{font-size:11px}
 .ap-chip{font-size:14px}
 .ap-nav{flex-wrap:wrap}
}
@media(max-width:360px){.ap-bar-label{display:none}.ap-back{padding:12px 14px}}

/* Phones open on the first question. The headline stays on top, the form follows it, and the intro paragraphs
   (why we ask, what happens next) move below the form as a short note. Desktop and tablets are unchanged.
   The form's "Tell Us About Yourself" title is kept for screen readers but not shown, since the headline sits
   right above it, and the small "Apply for Coaching" label is left out because "01 Application" already says it.
   The intro copy itself is all still on the page, just below the form. */
@media(max-width:760px){
 .flow{padding-top:20px}
 .flow-steps{margin-bottom:14px}
 .flow-grid{gap:18px}
 .flow-intro{display:contents}
 .flow-intro>.eyebrow{display:none}
 .flow-intro h1{margin:0}
 .flow-about{order:1;margin-top:6px;padding-top:18px;border-top:1px solid #d6d0c2}
 .flow-about p{font-size:15px;line-height:1.55;color:#3b4654;margin:0 0 10px}
 .flow-about p.small{font-size:14px;margin:0}
 .formbox>h2{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
 .formbox{position:relative}
}

/* Optional permission to text (added 2026-11-08) */
.sms-ok{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;font-size:15px;line-height:1.4;cursor:pointer}
.sms-ok input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:currentColor}
.sms-ok-note{opacity:.7}