/* Career Pulse — landing, survey, and results styling (mobile-first) */
.cp-hero{padding:40px 0 28px;text-align:center;background:linear-gradient(135deg, color-mix(in srgb, var(--w2f-primary) 10%, var(--w2f-bg)), var(--w2f-bg))}
@media (min-width:600px){ .cp-hero{padding:70px 0 40px} }
.cp-hero__inner{max-width:760px;margin:0 auto}
.cp-hero h1{font-size:clamp(1.5em,6vw,2.6em);margin-bottom:.4em}
.cp-hero p{opacity:.8;font-size:.95em}
@media (min-width:600px){ .cp-hero p{font-size:1.05em} }
.cp-hero__actions{display:flex;flex-direction:column;gap:10px;justify-content:center;margin:22px 0 10px}
@media (min-width:480px){ .cp-hero__actions{flex-direction:row;flex-wrap:wrap;gap:12px} }
.cp-hero__actions .w2f-btn{width:100%}
@media (min-width:480px){ .cp-hero__actions .w2f-btn{width:auto} }
.w2f-btn--ghost{background:transparent;border-color:var(--w2f-primary);color:var(--w2f-primary)}
.cp-hero__note{opacity:.6;font-size:.85em}

.cp-how__grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:700px){ .cp-how__grid{grid-template-columns:repeat(3,1fr);gap:24px} }
.cp-how__step{padding:20px;border:1px solid rgba(0,0,0,.08);border-radius:var(--w2f-radius,10px)}
.cp-how__icon{font-size:2em}

.cp-survey{max-width:680px;margin:0 auto;padding:28px 16px}
@media (min-width:600px){ .cp-survey{padding:50px 20px} }
.cp-survey__bar{height:6px;background:rgba(0,0,0,.08);border-radius:99px;overflow:hidden;margin-bottom:16px}
.cp-survey__progress{height:100%;background:var(--w2f-primary);transition:width .3s ease}
.cp-survey__step-label{opacity:.6;font-size:.85em;margin:0 0 6px}
.cp-survey__title{font-size:1.25em;margin-bottom:6px}
@media (min-width:600px){ .cp-survey__title{font-size:1.5em} }
.cp-survey__help{opacity:.7;margin-bottom:20px;font-size:.92em}
.cp-survey__field{margin-bottom:24px}
.cp-choice,.cp-choice-row .cp-choice{display:inline-flex;align-items:center;margin:0 8px 8px 0;padding:10px 16px;border:1px solid rgba(0,0,0,.15);border-radius:999px;background:transparent;cursor:pointer;font-size:.92em;color:var(--w2f-text);min-height:44px}
.cp-choice.is-active{background:var(--w2f-primary);border-color:var(--w2f-primary);color:#fff}
.cp-textarea,.cp-input,.cp-select{width:100%;padding:12px 14px;border:1px solid rgba(0,0,0,.15);border-radius:var(--w2f-radius,10px);background:var(--w2f-bg);color:var(--w2f-text);font-family:inherit;font-size:16px;margin-top:10px}
.cp-label{display:block;margin-top:14px;font-size:.85em;opacity:.7}
.cp-count{margin-top:8px;font-size:.85em;opacity:.6}
.cp-survey__nav{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cp-survey__nav .w2f-btn{flex:0 0 auto}
.cp-loading{text-align:center;padding:60px 16px;font-size:1.1em}
@media (min-width:600px){ .cp-loading{padding:80px 20px;font-size:1.2em} }
.cp-loading span{display:block;opacity:.6;font-size:.7em;margin-top:8px}

.cp-results__inner{max-width:760px;margin:0 auto;padding:32px 16px;text-align:center}
@media (min-width:600px){ .cp-results__inner{padding:50px 20px} }
.cp-score-ring{width:120px;height:120px;border-radius:50%;margin:0 auto 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:conic-gradient(var(--w2f-primary) calc(var(--pct)*1%), rgba(0,0,0,.08) 0)}
@media (min-width:600px){ .cp-score-ring{width:150px;height:150px} }
.cp-score-ring span{font-size:1.8em;font-weight:700;font-family:var(--w2f-font-heading)}
@media (min-width:600px){ .cp-score-ring span{font-size:2.2em} }
.cp-score-ring small{opacity:.6}
.cp-ai-summary{max-width:560px;margin:0 auto 20px;opacity:.85;font-style:italic;font-size:.95em}
.cp-breakdown{display:grid;gap:12px;text-align:left;margin:24px 0;max-width:520px;margin-left:auto;margin-right:auto}
.cp-breakdown__item{display:grid;grid-template-columns:78px 1fr 38px;align-items:center;gap:8px;font-size:.85em}
@media (min-width:480px){ .cp-breakdown__item{grid-template-columns:100px 1fr 44px;gap:10px;font-size:.9em} }
.cp-bar{height:8px;background:rgba(0,0,0,.08);border-radius:99px;overflow:hidden}
.cp-bar__fill{height:100%;background:var(--w2f-secondary)}
.cp-roadmap__title{margin-top:32px;font-size:1.3em}
@media (min-width:600px){ .cp-roadmap__title{margin-top:40px} }
.cp-roadmap__priority{background:color-mix(in srgb, var(--w2f-secondary) 12%, var(--w2f-bg));padding:14px 16px;border-radius:var(--w2f-radius,10px);text-align:left;font-size:.95em}
.cp-roadmap__row{display:grid;grid-template-columns:1fr;gap:18px;text-align:left;margin:20px 0}
@media (min-width:700px){ .cp-roadmap__row{grid-template-columns:1fr 1fr;gap:24px;margin:24px 0} }
.cp-roadmap__row ul{padding-left:20px}
.cp-plan{display:grid;gap:14px;text-align:left;margin:20px 0}
@media (min-width:600px){ .cp-plan{gap:16px;margin:24px 0} }
.cp-plan__phase{border:1px solid rgba(0,0,0,.08);border-radius:var(--w2f-radius,10px);padding:16px}
@media (min-width:600px){ .cp-plan__phase{padding:18px} }
.cp-plan__phase h4{margin-top:0}
.cp-results__actions{display:flex;flex-direction:column;gap:10px;justify-content:center;margin-top:26px}
@media (min-width:480px){ .cp-results__actions{flex-direction:row;gap:12px;margin-top:30px} }
.cp-results__actions .w2f-btn{width:100%}
@media (min-width:480px){ .cp-results__actions .w2f-btn{width:auto} }