/* ============================================================
   NTP Hiring Funnel Diagnostic — styled to match the NTP Talent theme.
   Scoped under .hfd. Inherits Libre Franklin + the theme .btn pill.
   ============================================================ */
.hfd{
  --hfd-green:#59c399;
  --hfd-dark:#14291f;
  --hfd-ink:#1f201a;
  --hfd-rust:#d5431e;
  --hfd-paper:#f2fff9;
  --hfd-paper2:#f6f7f6;
  --hfd-line:#e3e7e4;
  --hfd-muted:#565656;
  --st-tight:#3fb984;
  --st-working:#e1b530;
  --st-leaking:#f2762e;
  --st-broken:#d5431e;

  max-width:760px;
  margin:0 auto;
  padding:48px 22px 84px;
  color:var(--hfd-ink);
}
@media(max-width:560px){
  .hfd{padding:32px 18px 64px;}
}
.hfd *{box-sizing:border-box;}

/* ---------- headings / type ---------- */
.hfd .hfd-h1{font-size:clamp(34px,5.6vw,52px);line-height:1.05;font-weight:700;letter-spacing:-.01em;margin:6px 0 0;}
.hfd .hfd-h2{font-size:clamp(28px,4.4vw,40px);line-height:1.08;font-weight:700;letter-spacing:-.01em;margin:0;}
.hfd .hfd-h3{font-size:22px;line-height:1.15;font-weight:700;margin:0;}
.hfd .hfd-lede{font-size:19px;line-height:1.5;color:var(--hfd-muted);margin-top:18px;font-weight:500;}
.hfd .hfd-kicker{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--hfd-green);margin-bottom:12px;}
.hfd .hfd-thesis{
  border-left:3px solid var(--hfd-green);
  padding:6px 0 6px 18px;margin:24px 0;
  font-size:16px;color:var(--hfd-ink);font-weight:600;line-height:1.5;
}
.hfd .hfd-fineprint{font-size:13px;color:var(--hfd-muted);margin-top:26px;line-height:1.55;}
.hfd .hfd-qtext{font-size:17px;font-weight:600;line-height:1.4;margin-bottom:16px;}

/* ---------- brand bar / progress ---------- */
.hfd .hfd-brandbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.hfd .hfd-tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--hfd-muted);}
.hfd .hfd-progress{height:5px;background:var(--hfd-line);margin-bottom:32px;overflow:hidden;border-radius:3px;}
.hfd .hfd-progress > i{display:block;height:100%;background:var(--hfd-green);transition:width .45s cubic-bezier(.4,0,.2,1);}

/* ---------- buttons (reuse theme .btn pill) ---------- */
.hfd .hfd-arw{font-size:17px;line-height:1;}
.hfd .btn:disabled{background:#dfe3e0;color:#9aa19c;cursor:not-allowed;border-color:transparent;}
.hfd .hfd-navrow{display:flex;gap:12px;align-items:center;margin-top:34px;flex-wrap:wrap;}
.hfd .hfd-spacer{flex:1;}

/* ---------- intro chips ---------- */
.hfd .hfd-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.hfd .hfd-chip{
  border:1px solid var(--hfd-line);border-radius:999px;padding:8px 16px;
  font-size:13px;font-weight:600;color:var(--hfd-muted);background:#fff;
}
.hfd .hfd-chip b{color:var(--hfd-ink);font-weight:800;}

/* ---------- stage head ---------- */
.hfd .hfd-stagehead{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
.hfd .hfd-stagenum{
  font-size:13px;font-weight:800;letter-spacing:.06em;
  background:var(--hfd-green);color:#000;border-radius:999px;
  padding:6px 11px;flex-shrink:0;
}
.hfd .hfd-stagetag{font-size:16px;color:var(--hfd-muted);margin-bottom:26px;font-weight:500;}

/* ---------- questions ---------- */
.hfd .hfd-q{border-top:1px solid var(--hfd-line);padding:24px 0;}
.hfd .hfd-q:first-of-type{border-top:none;}
.hfd .hfd-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
/* High specificity to override the theme's global `button` pill style. */
.hfd .hfd-opts .hfd-opt{
  appearance:none;border:1px solid var(--hfd-line);background:#fff;
  color:var(--hfd-muted);font-family:inherit;cursor:pointer;border-radius:999px;
  padding:13px 6px;min-height:0;font-size:13.5px;font-weight:700;line-height:1.2;
  transition:all .13s ease;
}
.hfd .hfd-opts .hfd-opt:hover{background:#fff;border-color:var(--hfd-green);color:var(--hfd-ink);}
.hfd .hfd-opts .hfd-opt.sel{background:var(--hfd-green);border-color:var(--hfd-green);color:#000;}
.hfd .hfd-opts .hfd-opt.sel:hover{background:var(--hfd-green);border-color:var(--hfd-green);color:#000;}

/* ---------- step zero ---------- */
.hfd .hfd-sz-opts{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.hfd .hfd-sz-opts .hfd-sz-opt{
  appearance:none;text-align:left;cursor:pointer;font-family:inherit;
  border:1px solid var(--hfd-line);background:#fff;color:var(--hfd-ink);border-radius:12px;
  padding:18px 20px;min-height:0;font-size:16px;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  transition:all .13s ease;
}
.hfd .hfd-sz-opts .hfd-sz-opt:hover{background:#fff;border-color:var(--hfd-green);color:var(--hfd-ink);}
.hfd .hfd-sz-opts .hfd-sz-opt.sel{border-color:var(--hfd-green);background:var(--hfd-paper);color:var(--hfd-ink);}
.hfd .hfd-sz-opts .hfd-sz-opt small{color:var(--hfd-muted);font-weight:500;font-size:13px;text-align:right;}
.hfd .hfd-sz-opts .hfd-sz-opt.sel small{color:var(--hfd-green);}

/* ---------- email ---------- */
.hfd .hfd-field{
  width:100%;background:#fff;border:1px solid var(--hfd-line);border-radius:12px;
  color:var(--hfd-ink);font-family:inherit;font-size:16px;
  padding:17px 20px;margin-top:8px;
}
.hfd .hfd-field:focus{outline:none;border-color:var(--hfd-green);}
.hfd .hfd-field::placeholder{color:#9aa19c;}
.hfd .hfd-err{color:var(--hfd-rust);font-size:13px;margin-top:10px;display:none;font-weight:600;}
.hfd .hfd-privacy{font-size:12px;color:var(--hfd-muted);margin-top:14px;line-height:1.55;}

/* ---------- result ---------- */
.hfd .hfd-banner{
  border:1px solid var(--hfd-rust);background:rgba(213,67,30,.07);border-radius:12px;
  padding:18px 22px;margin-bottom:28px;
}
.hfd .hfd-bk{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--hfd-rust);margin-bottom:8px;}
.hfd .hfd-banner p{font-size:14px;color:var(--hfd-muted);line-height:1.55;}

/* Breathing room between the "Your hiring funnel" heading and whatever
   follows it (the Step Zero banner, or the overall score block). */
.hfd .hfd-h2 + .hfd-banner,
.hfd .hfd-h2 + .hfd-overall{margin-top:28px;}

.hfd .hfd-overall{display:flex;align-items:flex-end;gap:16px;margin:8px 0 28px;}
.hfd .hfd-big{font-size:64px;font-weight:800;line-height:.9;letter-spacing:-.03em;}
.hfd .hfd-ol{font-size:13px;color:var(--hfd-muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700;padding-bottom:8px;line-height:1.4;}

.hfd .hfd-funnel{margin:14px 0 8px;}
.hfd .hfd-seg{margin:0 auto 9px;transition:max-width .5s ease;}
.hfd .hfd-segrow{display:flex;align-items:center;gap:12px;}
.hfd .hfd-segname{width:104px;flex-shrink:0;font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;}
.hfd .hfd-track{flex:1;height:34px;background:var(--hfd-paper2);position:relative;border:1px solid var(--hfd-line);border-radius:8px;overflow:hidden;}
.hfd .hfd-fill{height:100%;transition:width .9s cubic-bezier(.3,1,.4,1);}
.hfd .hfd-fill.st-tight{background:var(--st-tight);}
.hfd .hfd-fill.st-working{background:var(--st-working);}
.hfd .hfd-fill.st-leaking{background:var(--st-leaking);}
.hfd .hfd-fill.st-broken{background:var(--st-broken);}
.hfd .hfd-segscore{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);}
.hfd .hfd-seg.worst .hfd-track{border-color:var(--hfd-rust);box-shadow:0 0 0 1px var(--hfd-rust);}
.hfd .hfd-leaktag{display:inline-block;background:var(--hfd-rust);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;margin-left:8px;vertical-align:middle;border-radius:4px;}
.hfd .hfd-funnel-arrow{width:0;height:0;margin:2px auto 0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:15px solid var(--hfd-line);}

.hfd .hfd-big.st-tight{color:var(--st-tight);}
.hfd .hfd-big.st-working{color:var(--st-working);}
.hfd .hfd-big.st-leaking{color:var(--st-leaking);}
.hfd .hfd-big.st-broken{color:var(--st-broken);}

.hfd .hfd-rec{border:1px solid var(--hfd-line);background:var(--hfd-paper);border-radius:14px;margin-top:30px;overflow:hidden;}
.hfd .hfd-rechd{padding:22px 24px 18px;border-bottom:1px solid var(--hfd-line);}
.hfd .hfd-reck{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-bottom:10px;color:var(--hfd-green);}
.hfd .hfd-recbody{padding:20px 24px;font-size:15px;color:var(--hfd-muted);line-height:1.6;}
.hfd .hfd-artefact{margin:0 24px 24px;border:1px solid var(--hfd-line);background:#0f1a14;border-radius:10px;overflow:hidden;}
.hfd .hfd-arthd{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.12);}
.hfd .hfd-artk{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#7fd9b3;}
.hfd .hfd-arthd .hfd-copybtn{appearance:none;border:1px solid rgba(255,255,255,.25);background:transparent;color:#cfe9dd;font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;min-height:0;cursor:pointer;border-radius:6px;}
.hfd .hfd-arthd .hfd-copybtn:hover{background:transparent;color:#fff;border-color:#fff;}
.hfd .hfd-artefact pre{padding:18px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;color:var(--hfd-ink);white-space:pre-wrap;line-height:1.7;margin:0;font-weight:500;background:var(--hfd-line);}
@media(max-width:560px){.hfd .hfd-artefact pre{font-size:13px;}}
.hfd .hfd-alsoleak{font-size:13px;color:var(--hfd-muted);margin-top:18px;}
.hfd .hfd-alsoleak b{color:var(--st-leaking);}

.hfd .hfd-cta{border:1px solid var(--hfd-green);background:var(--hfd-paper);border-radius:14px;padding:26px 24px;margin-top:30px;}
.hfd .hfd-ck{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--hfd-green);margin-bottom:10px;}
.hfd .hfd-cta p{font-size:14px;color:var(--hfd-muted);margin:12px 0 20px;line-height:1.55;}

.hfd .hfd-footer{margin-top:42px;border-top:1px solid var(--hfd-line);padding-top:20px;font-size:12px;color:var(--hfd-muted);}

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

@media(max-width:560px){
  .hfd .hfd-opts{grid-template-columns:repeat(2,1fr);}
  .hfd .hfd-segname{width:76px;font-size:11px;}
}