/* PHS Onboarding Quiz — all selectors scoped under #phs-oq-root */

#phs-oq-root{
  --oq-blue:#2a8ece;
  --oq-blue-dark:#1f6fa3;
  --oq-gold:#c9a630;
  --oq-gold-soft:#D4AE45;
  --oq-navy:#0d2b3e;
  --oq-ink:#0d2b3e;
  --oq-card:#ffffff;
  --oq-line:#e2e9f0;
  --oq-muted:#5b7488;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--oq-ink);
  max-width:620px;
  margin:0 auto;
  padding:8px 0;
}
#phs-oq-root *{box-sizing:border-box;}

#phs-oq-root .phs-oq-card{
  background:var(--oq-card);
  border:1px solid var(--oq-line);
  border-radius:22px;
  box-shadow:0 24px 60px -28px rgba(13,43,62,.32);
  overflow:hidden;
}
#phs-oq-root .phs-oq-hidden{display:none;}

/* progress */
#phs-oq-root .phs-oq-progress-wrap{padding:22px 28px 0;}
#phs-oq-root .phs-oq-progress-meta{
  display:flex;justify-content:space-between;
  font-size:12.5px;color:var(--oq-muted);font-weight:600;margin-bottom:8px;
}
#phs-oq-root .phs-oq-track{
  height:7px;background:var(--oq-line);border-radius:99px;overflow:hidden;
}
#phs-oq-root .phs-oq-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--oq-blue),var(--oq-gold-soft));
  border-radius:99px;transition:width .4s cubic-bezier(.4,0,.2,1);
}

/* screen */
#phs-oq-root .phs-oq-screen{padding:30px 28px 28px;}
#phs-oq-root .phs-oq-eyebrow{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--oq-blue);font-weight:700;margin-bottom:10px;
}
#phs-oq-root h2.phs-oq-h{
  font-family:'Roboto Condensed','Inter',sans-serif;
  font-weight:900;font-size:29px;line-height:1.14;letter-spacing:-.01em;
  margin:0 0 8px;color:var(--oq-ink);
}
#phs-oq-root .phs-oq-q{
  font-family:'Roboto Condensed','Inter',sans-serif;
  font-weight:900;font-size:24px;line-height:1.18;margin:0 0 6px;
}
#phs-oq-root .phs-oq-sub{
  font-size:14.5px;color:var(--oq-muted);margin-bottom:20px;line-height:1.5;
}
#phs-oq-root .phs-oq-lede{
  font-size:15px;color:var(--oq-muted);line-height:1.6;margin-bottom:22px;
}

/* options */
#phs-oq-root .phs-oq-options{display:flex;flex-direction:column;gap:11px;}
#phs-oq-root .phs-oq-opt{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:#fbfdfe;border:1.6px solid var(--oq-line);border-radius:14px;
  padding:15px 16px;font-family:inherit;font-size:15.5px;font-weight:600;
  color:var(--oq-ink);cursor:pointer;
  transition:border-color .15s,background .15s,transform .08s;
}
#phs-oq-root .phs-oq-opt:hover{border-color:var(--oq-blue);background:#f2f8fc;}
#phs-oq-root .phs-oq-opt:active{transform:scale(.99);}
#phs-oq-root .phs-oq-ico{
  width:38px;height:38px;flex:0 0 38px;border-radius:10px;
  background:linear-gradient(140deg,rgba(42,142,206,.16),rgba(201,166,48,.18));
  display:flex;align-items:center;justify-content:center;font-size:19px;
}
#phs-oq-root .phs-oq-lbl{display:flex;flex-direction:column;gap:1px;}
#phs-oq-root .phs-oq-lbl small{font-size:12.5px;font-weight:500;color:var(--oq-muted);}

/* welcome icon */
#phs-oq-root .phs-oq-welcome-ico{
  width:64px;height:64px;border-radius:16px;
  background:linear-gradient(140deg,var(--oq-blue),var(--oq-blue-dark));
  display:flex;align-items:center;justify-content:center;
  font-size:30px;margin-bottom:18px;
}

/* buttons */
#phs-oq-root .phs-oq-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:700;font-size:15.5px;border:none;
  border-radius:12px;cursor:pointer;padding:14px 22px;width:100%;
  background:var(--oq-blue);color:#fff;
  box-shadow:0 12px 24px -10px rgba(42,142,206,.7);
  transition:transform .08s,background .15s;
}
#phs-oq-root .phs-oq-btn:hover{background:var(--oq-blue-dark);}
#phs-oq-root .phs-oq-btn:active{transform:scale(.99);}
#phs-oq-root .phs-oq-skip{
  display:block;width:100%;text-align:center;background:none;border:none;
  cursor:pointer;color:var(--oq-muted);font-family:inherit;
  font-size:13.5px;font-weight:600;padding:14px 0 2px;
}
#phs-oq-root .phs-oq-skip:hover{color:var(--oq-ink);text-decoration:underline;}
#phs-oq-root .phs-oq-back{
  background:none;border:none;cursor:pointer;color:var(--oq-muted);
  font-family:inherit;font-size:13.5px;font-weight:600;padding:0;margin-bottom:14px;
}
#phs-oq-root .phs-oq-back:hover{color:var(--oq-ink);}

/* result */
#phs-oq-root .phs-oq-result-head{
  background:linear-gradient(150deg,var(--oq-navy),#143a52);
  color:#fff;padding:30px 28px 26px;
}
#phs-oq-root .phs-oq-result-head .phs-oq-eyebrow{color:var(--oq-gold-soft);}
#phs-oq-root .phs-oq-result-head h2.phs-oq-h{color:#fff;}
#phs-oq-root .phs-oq-result-head p{
  font-size:14px;color:rgba(255,255,255,.8);margin:6px 0 0;line-height:1.55;
}
#phs-oq-root .phs-oq-section-label{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--oq-blue);margin:24px 0 12px;
}
#phs-oq-root .phs-oq-rec{
  display:flex;gap:13px;align-items:flex-start;
  border:1.6px solid var(--oq-line);border-radius:14px;
  padding:14px 15px;margin-bottom:10px;background:#fbfdfe;
  text-decoration:none;color:inherit;
}
#phs-oq-root a.phs-oq-rec:hover{border-color:var(--oq-blue);background:#f2f8fc;}
#phs-oq-root .phs-oq-num{
  width:30px;height:30px;flex:0 0 30px;border-radius:8px;
  background:var(--oq-blue);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
#phs-oq-root .phs-oq-rec-title{font-weight:700;font-size:15.5px;margin-bottom:2px;}
#phs-oq-root .phs-oq-rec-why{font-size:13px;color:var(--oq-muted);line-height:1.5;}
#phs-oq-root .phs-oq-tips{
  background:#fff8e6;border:1.6px solid rgba(201,166,48,.4);
  border-radius:14px;padding:16px 17px;margin-top:6px;
}
#phs-oq-root .phs-oq-tips-head{
  font-weight:800;font-size:14px;color:var(--oq-navy);
  display:flex;align-items:center;gap:7px;margin-bottom:10px;
}
#phs-oq-root .phs-oq-tip{
  display:flex;gap:9px;font-size:13.5px;line-height:1.5;
  margin-bottom:9px;color:var(--oq-ink);
}
#phs-oq-root .phs-oq-tip:last-child{margin-bottom:0;}
#phs-oq-root .phs-oq-tip span.dot{color:var(--oq-gold);font-weight:800;flex:0 0 auto;}
#phs-oq-root .phs-oq-footnote{
  font-size:12.5px;color:var(--oq-muted);text-align:center;
  margin-top:16px;line-height:1.5;
}

/* state messages */
#phs-oq-root .phs-oq-center{text-align:center;padding:50px 28px;}
#phs-oq-root .phs-oq-big-emoji{font-size:40px;margin-bottom:14px;}

#phs-oq-root .phs-oq-fade{animation:phsOqFade .35s ease;}
@keyframes phsOqFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

@media(max-width:520px){
  #phs-oq-root h2.phs-oq-h{font-size:24px;}
  #phs-oq-root .phs-oq-q{font-size:21px;}
}
