/* ============================================================
   HirePunk Landing — Recruiters
   page-specific styles layered on hp-landing-v3(.b).css
   ============================================================ */

/* ---------- HERO "the deal" micro rows ---------- */
.hero-micro {
  margin-top: 26px; display: flex; gap: 22px; flex-wrap: wrap; justify-content: center;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash-2); font-weight: 600;
}
.hero-micro span { display: inline-flex; align-items: center; gap: 8px; }
.hero-micro .sq { width: 7px; height: 7px; background: var(--acid); flex: none; }

/* ---------- nots inside feature / fit copy columns ---------- */
.feat-nots { font-family: var(--mono); font-size: 12px; color: var(--ash-2); display: flex; flex-direction: column; gap: 6px; margin-top: 22px; }
.feat-nots .no { display: flex; gap: 10px; align-items: center; }
.feat-nots .no .x { color: var(--danger); font-weight: 700; }
.feat-nots .no.yes .x { color: var(--acid-ink); background: var(--acid); border-radius: 4px; padding: 0 5px; }
.feat-nots .no.yes { color: var(--ink); font-weight: 600; }

/* ---------- frost inner panel inside paper viz cards ---------- */
.brief-panel { background: var(--frost); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }

/* matched-to-you strip under the role brief */
.match-strip {
  margin-top: 14px; display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--frost); border-radius: 12px; padding: 13px 16px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.match-strip .sq { width: 8px; height: 8px; background: var(--acid); flex: none; animation: blink 1.8s ease-in-out infinite; }
.match-strip .fit { margin-left: auto; font-family: var(--wide); font-size: 15px; color: var(--acid-ink); background: var(--acid); padding: 3px 9px; border-radius: 6px; }

/* ---------- deal lines (dark "who should join" section) ---------- */
.deal-lines { display: flex; flex-direction: column; gap: 16px; justify-content: center; align-items: flex-start; min-width: 0; }
.deal-line {
  font-family: var(--wide); font-weight: 700; text-transform: uppercase;
  font-size: clamp(23px, 2.4vw, 34px); line-height: 1.16; color: var(--frost);
}
.deal-line em { color: var(--acid); }
.deal-line.dim { color: var(--ash); font-size: clamp(19px, 1.9vw, 26px); }
.deal-cta { margin-top: 16px; }

/* ---------- role chips grid ---------- */
.rolelist { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rolelist .rchip {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 17px 20px; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.rolelist .rchip .n { font-family: var(--wide); font-size: 10px; color: var(--ash); flex: none; width: 26px; }
.rolelist .rchip .sq { margin-left: auto; width: 8px; height: 8px; background: var(--mist); border: 1px solid var(--line); flex: none; transition: background .2s ease, border-color .2s ease; }
.rolelist .rchip:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 18px 40px rgba(15,19,32,0.10); }
.rolelist .rchip:hover .sq { background: var(--acid); border-color: var(--acid); }

/* ---------- FAQ sits on paper here (roles section above is frost) ---------- */
.faq { background: var(--paper); border-top: 1px solid var(--line); }
.faq .faq-item { background: var(--frost); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .rolelist { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .rolelist { grid-template-columns: 1fr; }
  .rolelist .rchip { padding: 14px 16px; }
  .deal-line { font-size: clamp(20px, 6.4vw, 28px); }
  .deal-line.dim { font-size: clamp(16px, 5vw, 22px); }
  .hero-micro { gap: 10px 18px; }
  .match-strip .fit { font-size: 13px; }
}