/* Blue Lance — interactive "Prove It" readiness assessment.
   Brand: navy #04243A, ink, cyan #16BDE8, Space Grotesk / Manrope / JetBrains Mono. */

.bla{--navy:#04243A;--navy2:#084870;--cyan:#16BDE8;--ink:#243845;--slate:#5A6B7B;--fog:#DDE6EE;--mist:#F4F7FA;--pass:#1FA971;--review:#E8A33D;--fail:#DB4C40;
  max-width:820px;margin:0 auto;padding:0 24px;}
/* Clear the sticky nav when the tool scrolls itself into view between steps/results. */
#bl-assessment{scroll-margin-top:92px;}
.bla *{box-sizing:border-box;}

/* progress */
.bla-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;}
.bla-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);}
.bla-progress{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;max-width:340px;}
.bla-progress__bar{height:100%;width:0;background:var(--cyan);box-shadow:0 0 10px var(--cyan);transition:width .4s cubic-bezier(.16,.8,.3,1);}
.bla-count{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,.5);white-space:nowrap;}

/* stage card */
.bla-stage{background:rgba(5,30,50,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(22,189,232,.22);border-radius:16px;padding:38px 40px 34px;box-shadow:0 30px 70px rgba(0,0,0,.4);}
.bla-anim{animation:blaIn .45s cubic-bezier(.16,.8,.3,1) both;}
@keyframes blaIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.bla-q__k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px;}
.bla-q__title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.5rem,3vw,2rem);line-height:1.12;letter-spacing:-.02em;color:#fff;margin:0;}
.bla-q__hint{font-size:14.5px;color:rgba(255,255,255,.6);margin:12px 0 0;}

/* options */
.bla-opts{display:flex;flex-direction:column;gap:11px;margin:26px 0 0;}
.bla-opts--grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.bla-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:16px 18px;
  color:#fff;font-family:Manrope,sans-serif;font-size:15.5px;line-height:1.4;
  -webkit-appearance:none!important;appearance:none!important;-webkit-tap-highlight-color:transparent;transition:border-color .15s,background .15s,transform .1s;}
.bla-opt,.bla-opt:active,.bla-opt:focus{background:rgba(255,255,255,.03);}
.bla-opt:hover{border-color:rgba(22,189,232,.6);background:rgba(22,189,232,.06)!important;}
.bla-opt:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.bla-opt[aria-pressed="true"],.bla-opt.is-sel{border-color:var(--cyan);background:rgba(22,189,232,.12)!important;}
.bla-opt__mark{flex:0 0 auto;width:22px;height:22px;border-radius:6px;border:1.5px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;transition:all .15s;}
.bla-opt--radio .bla-opt__mark{border-radius:50%;}
.bla-opt[aria-pressed="true"] .bla-opt__mark,.bla-opt.is-sel .bla-opt__mark{background:var(--cyan);border-color:var(--cyan);}
.bla-opt__mark svg{width:13px;height:13px;opacity:0;transition:opacity .15s;}
.bla-opt[aria-pressed="true"] .bla-opt__mark svg,.bla-opt.is-sel .bla-opt__mark svg{opacity:1;}

/* footer nav */
.bla-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:30px;}
/* appearance:none + explicit !important state backgrounds so the OS accent colour
   can never tint our buttons (macOS pink accent leaks into native <button> otherwise). */
.bla-btn{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15.5px;border-radius:9px;padding:14px 26px;cursor:pointer;-webkit-appearance:none!important;appearance:none!important;border:0;-webkit-tap-highlight-color:transparent;transition:transform .15s,box-shadow .15s,background .15s,opacity .15s;}
.bla-btn--primary,.bla-btn--primary:focus,.bla-btn--primary:active,.bla-btn--primary:focus-visible{background:var(--cyan)!important;color:var(--navy)!important;box-shadow:0 8px 24px rgba(22,189,232,.3);}
.bla-btn--primary:hover{background:#33c6ef!important;transform:translateY(-2px);box-shadow:0 12px 30px rgba(22,189,232,.45);}
.bla-btn--primary:disabled{opacity:.4!important;cursor:not-allowed;transform:none;box-shadow:none;}
.bla-btn--ghost,.bla-btn--ghost:hover,.bla-btn--ghost:focus,.bla-btn--ghost:active,.bla-btn--ghost:focus-visible{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.24);}
.bla-btn--ghost:hover{border-color:var(--cyan);}
.bla-btn--text,.bla-btn--text:hover,.bla-btn--text:focus,.bla-btn--text:active,.bla-btn--text:focus-visible{background:transparent!important;color:rgba(255,255,255,.62);padding:14px 6px;}
.bla-btn--text:hover{color:var(--cyan)!important;}
.bla-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}

/* intro */
.bla-intro{text-align:center;padding:20px 0 8px;}
.bla-intro__badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:26px;}
.bla-chip{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.16);padding:6px 11px;border-radius:5px;}

/* ---------- result ---------- */
.bla-res__head{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;}
.bla-score{position:relative;width:150px;height:150px;flex:0 0 auto;}
.bla-score svg{transform:rotate(-90deg);}
.bla-score__track{stroke:rgba(255,255,255,.1);}
.bla-score__val{stroke:var(--cyan);stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.16,.8,.3,1);}
.bla-score__num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.bla-score__num b{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:40px;color:#fff;line-height:1;}
.bla-score__num span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:5px;}
.bla-res__label{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;line-height:1.15;letter-spacing:-.02em;color:#fff;margin:0;}
.bla-res__sub{font-size:15px;line-height:1.55;color:rgba(255,255,255,.68);margin:12px 0 0;}

.bla-dims{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;margin:34px 0 0;}
.bla-dim__row{display:flex;justify-content:space-between;font-size:13.5px;color:rgba(255,255,255,.82);margin-bottom:7px;}
.bla-dim__row b{font-family:'JetBrains Mono',monospace;font-weight:500;}
.bla-dim__bar{height:7px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;}
.bla-dim__fill{height:100%;width:0;border-radius:4px;transition:width 1.1s cubic-bezier(.16,.8,.3,1);}

.bla-sec-k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin:36px 0 16px;}
.bla-fw{display:flex;flex-wrap:wrap;gap:8px;}
.bla-fw__chip{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#fff;border:1px solid rgba(22,189,232,.28);background:rgba(22,189,232,.06);padding:7px 12px;border-radius:6px;}
.bla-fw__chip svg{width:13px;height:13px;stroke:var(--pass);}
.bla-recs{display:flex;flex-direction:column;gap:12px;}
.bla-rec{display:flex;gap:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-left:2px solid var(--cyan);border-radius:10px;padding:16px 18px;}
.bla-rec__n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;color:var(--cyan);flex:0 0 auto;}
.bla-rec__t{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15.5px;color:#fff;margin:0 0 4px;}
.bla-rec__d{font-size:14px;line-height:1.55;color:rgba(255,255,255,.66);margin:0;}

/* lead form */
.bla-lead{margin-top:36px;background:rgba(22,189,232,.06);border:1px solid rgba(22,189,232,.22);border-radius:14px;padding:28px 30px;}
.bla-lead__t{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;color:#fff;margin:0 0 6px;}
.bla-lead__d{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.7);margin:0 0 20px;}
.bla-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.bla-field label{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:7px;}
.bla-field input{width:100%;font-family:Manrope,sans-serif;font-size:16px;color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:12px 14px;outline:none;transition:border-color .15s,background .15s;}
.bla-field input:focus{border-color:var(--cyan);background:rgba(255,255,255,.07);}
.bla-field input::placeholder{color:rgba(255,255,255,.32);}
.bla-lead__actions{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap;}
.bla-lead__note{font-size:12px;color:rgba(255,255,255,.42);}
.bla-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

.bla-done{text-align:center;padding:26px 10px;}
.bla-done__ring{width:66px;height:66px;border-radius:50%;background:rgba(31,169,113,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;}
.bla-done__ring svg{width:34px;height:34px;stroke:var(--pass);}

.bla-restart{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:rgba(255,255,255,.6);background:none;border:0;cursor:pointer;margin-top:8px;}
.bla-restart:hover{color:var(--cyan);}

/* responsive */
@media (max-width:640px){
  .bla{padding:0 18px;}
  .bla-stage{padding:26px 22px;}
  .bla-opts--grid{grid-template-columns:1fr;}
  .bla-res__head{grid-template-columns:1fr;text-align:center;justify-items:center;}
  .bla-dims{grid-template-columns:1fr;}
  .bla-fields{grid-template-columns:1fr;}
  .bla-nav{flex-wrap:wrap;}
  .bla-nav .bla-btn--primary{flex:1;}
}

@media (prefers-reduced-motion:reduce){
  .bla-anim,.bla-progress__bar,.bla-dim__fill,.bla-score__val{animation:none!important;transition:none!important;}
}

/* print / save snapshot */
@media print{
  body *{visibility:hidden;}
  .bla-print,.bla-print *{visibility:visible;}
  .bla-print{position:absolute;left:0;top:0;width:100%;color:#04243A;}
  .bla-lead,.bla-nav,.bla-restart{display:none!important;}
}