/* How Your Brain Works — styles, ported from the approved mockup.
   Everything is scoped under .laf-efp so the theme cannot leak in
   and these rules cannot leak out. Brand: navy #2b4a66, orange #f16334. */

.laf-efp{
  --laf-navy:#2b4a66;
  --laf-orange:#f16334;
  --laf-teal:#3a8a7d;
  --laf-amber:#cf9247;
  --laf-ink:#33404a;
  --laf-soft:#faf7f3;
  --laf-line:#e7ded4;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--laf-ink);
  line-height:1.6;
  max-width:640px;
  margin:0 auto;
  -webkit-font-smoothing:antialiased;
}
.laf-efp *{box-sizing:border-box}

.laf-efp .laf-card{
  background:#fff;border:1px solid var(--laf-line);border-radius:18px;
  padding:30px 28px;box-shadow:0 8px 30px rgba(43,74,102,.06);margin:0 0 20px;
}
.laf-efp h1.laf-h1{font-size:26px;line-height:1.25;color:var(--laf-navy);margin:0 0 6px;font-weight:700}
.laf-efp .laf-descriptor{color:#7b8790;font-size:15px;letter-spacing:.3px;margin:0 0 16px}
.laf-efp h2.laf-h2{font-size:20px;color:var(--laf-navy);margin:26px 0 10px;font-weight:700}
.laf-efp h3.laf-h3{font-size:18px;color:var(--laf-navy);margin:0 0 4px;font-weight:700}
.laf-efp p{margin:0 0 14px}
.laf-efp .laf-lead{font-size:17px}
.laf-efp .laf-muted{color:#7b8790;font-size:14px}
.laf-efp .laf-center{text-align:center}

.laf-efp .laf-reassure{display:flex;gap:16px;flex-wrap:wrap;margin:18px 0 4px}
.laf-efp .laf-reassure span{font-size:14px;color:#5f6b74}

.laf-efp .laf-btn{
  display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:600;
  background:var(--laf-orange);color:#fff;padding:14px 26px;border-radius:40px;
  font-size:16px;transition:filter .15s;text-decoration:none;line-height:1.4;
}
.laf-efp .laf-btn:hover{filter:brightness(1.05);color:#fff}
.laf-efp .laf-btn-secondary{
  background:transparent;color:var(--laf-navy);text-decoration:underline;
  padding:6px;border:0;cursor:pointer;font:inherit;font-size:15px;
}
.laf-efp .laf-btn-block{width:100%;text-align:center}
.laf-efp .laf-btn[disabled]{opacity:.6;cursor:default}

/* progress dots: one per area, purely visual, never numbered */
.laf-efp .laf-dots{display:flex;gap:9px;justify-content:center;margin:2px 0 22px}
.laf-efp .laf-dot{width:11px;height:11px;border-radius:50%;background:#e2d8cc;transition:background .25s}
.laf-efp .laf-dot.on{background:var(--laf-orange)}
.laf-efp .laf-dot.done{background:var(--laf-navy)}

/* the area chips that light as the picture builds */
.laf-efp .laf-chips{margin:20px 0 6px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.laf-efp .laf-chip{
  font-size:12.5px;padding:5px 11px;border-radius:20px;background:#f1ebe3;
  color:#b3a898;transition:background .3s,color .3s;
}
.laf-efp .laf-chip.lit{background:#e8f1ef;color:var(--laf-teal)}

/* questions */
.laf-efp .laf-q{font-size:20px;color:var(--laf-navy);margin:8px 0 20px;font-weight:600;line-height:1.35}
.laf-efp button.laf-opt{
  display:block;width:100%;text-align:left;background:#fbfaf8;
  border:1.5px solid var(--laf-line);border-radius:13px;padding:15px 18px;
  margin:0 0 12px;font:inherit;font-size:16px;color:var(--laf-ink);
  cursor:pointer;transition:border-color .12s,background .12s;
}
.laf-efp button.laf-opt:hover,
.laf-efp button.laf-opt:focus-visible{border-color:var(--laf-orange);background:#fff;outline:none}
.laf-efp .laf-build-line{font-size:13px;color:#9aa4ac;margin-top:8px}

.laf-efp .laf-fade{animation:lafFade .4s ease}
@keyframes lafFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* result: capacity cards */
.laf-efp .laf-cap{border:1px solid var(--laf-line);border-radius:14px;padding:16px 18px;margin:0 0 14px;background:#fff}
.laf-efp .laf-cap-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;background:none;border:0;padding:0;cursor:pointer;font:inherit;text-align:left;
}
.laf-efp .laf-cap-name{font-size:17px;font-weight:600;color:var(--laf-navy)}
.laf-efp .laf-band{font-size:13.5px;font-weight:600;padding:3px 12px;border-radius:20px;white-space:nowrap}
.laf-efp .laf-band.strength{background:#e6f1ee;color:var(--laf-teal)}
.laf-efp .laf-band.steady{background:#eaeef2;color:var(--laf-navy)}
.laf-efp .laf-band.effort{background:#f6ecdd;color:#a9772e}

/* the soft three-segment bar: colour plus a word for screen readers, never a figure */
.laf-efp .laf-meter{display:flex;gap:6px;margin-top:12px}
.laf-efp .laf-seg{flex:1;height:9px;border-radius:6px;background:#ece4da}
.laf-efp .laf-seg.f-strength{background:var(--laf-teal)}
.laf-efp .laf-seg.f-steady{background:var(--laf-navy)}
.laf-efp .laf-seg.f-effort{background:var(--laf-amber)}

.laf-efp .laf-cap-summary{font-size:14px;color:#5f6b74;margin:10px 0 0}
.laf-efp .laf-skills{margin-top:14px;padding-top:6px;border-top:1px dashed var(--laf-line);display:none}
.laf-efp .laf-skills.open{display:block}
.laf-efp .laf-skill{padding:12px 0;border-bottom:1px solid #f2ece3}
.laf-efp .laf-skill:last-child{border-bottom:0}
.laf-efp .laf-skill-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.laf-efp .laf-skill-name{font-size:15px;font-weight:600;color:var(--laf-navy)}
.laf-efp .laf-sband{font-size:12px;font-weight:600;padding:2px 10px;border-radius:16px;white-space:nowrap}
.laf-efp .laf-sband.strength{background:#e6f1ee;color:var(--laf-teal)}
.laf-efp .laf-sband.steady{background:#eaeef2;color:var(--laf-navy)}
.laf-efp .laf-sband.effort{background:#f6ecdd;color:#a9772e}
.laf-efp .laf-skill-copy{font-size:14px;color:#5f6b74;margin:6px 0 0}
.laf-efp .laf-skill-idea{font-size:13.5px;color:#7b8790;margin:6px 0 0;font-style:italic}
.laf-efp .laf-expand-hint{font-size:13px;color:#9aa4ac;margin-top:10px}

/* panels */
.laf-efp .laf-panel{background:#f7f4ef;border-radius:14px;padding:20px 22px;margin:22px 0}
.laf-efp .laf-panel-green{background:#f2f6f4}
.laf-efp .laf-panel ul{margin:8px 0 0;padding-left:20px}
.laf-efp .laf-panel li{margin:0 0 10px}

/* discovery invitation */
.laf-efp .laf-cta{background:var(--laf-navy);border-radius:16px;padding:26px 24px;text-align:center;color:#fff;margin:26px 0}
.laf-efp .laf-cta h2{color:#fff;margin:0 0 10px;font-size:20px}
.laf-efp .laf-cta p{color:#dbe4ec}

/* keep your profile */
.laf-efp .laf-capture{border:1px solid var(--laf-line);border-radius:16px;padding:22px;margin:22px 0}
.laf-efp .laf-capture input[type=text],
.laf-efp .laf-capture input[type=email]{
  width:100%;padding:12px 14px;border:1.5px solid var(--laf-line);border-radius:10px;
  font:inherit;font-size:16px;margin:0 0 12px;background:#fff;color:var(--laf-ink);
}
.laf-efp .laf-consent{display:flex;gap:10px;align-items:flex-start;margin:2px 0 14px}
.laf-efp .laf-consent input{margin-top:4px;flex:none}
.laf-efp .laf-consent span{font-size:14px;color:#5f6b74}
.laf-efp .laf-field-error{color:#a9772e;font-size:14px;margin:-6px 0 12px}
.laf-efp .laf-hp{position:absolute;left:-9999px;top:auto;height:1px;width:1px;overflow:hidden}

/* footer */
.laf-efp .laf-foot{font-size:12.5px;color:#98a2aa;margin-top:30px;line-height:1.5}
.laf-efp .laf-signoff{margin-top:20px;font-size:15px;color:var(--laf-navy)}

/* screen-reader only text (word bands, never figures) */
.laf-efp .laf-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (max-width:480px){
  .laf-efp .laf-card{padding:24px 18px}
  .laf-efp h1.laf-h1{font-size:23px}
  .laf-efp .laf-q{font-size:18px}
}