/* hopincareers.com job pages. Loaded after legal.css and seo-pages.css, which
 * supply the shell: fonts, glass nav, .article measure, noise, colours.
 * Nothing here invents a colour, radius or face; every value is one the
 * hopinjobs.com stylesheets already use:
 *   ink #1a1a1a · body #3a3a3a · muted #777 · accent #6F7FAD / #5A6A94
 *   paper #fffef6 · hairline rgba(26,26,26,.1) · radius 8px
 * The one statement piece is the pay ruler. Everything else stays quiet. */

.hc-brand { gap: 8px; }
.hc-brand span {
  font-family: 'General Sans', sans-serif; font-size: 19px; font-weight: 500;
  letter-spacing: -0.02em; color: var(--hp-accent-dark); line-height: 1; padding-top: 2px;
}

.hc h1 { margin-bottom: 14px; }
.hc .hc-meta { flex-wrap: wrap; font-size: 14px; color: var(--hp-muted); margin-bottom: 26px; gap: 6px 0; }
.hc .hc-meta .hc-m { display: inline-flex; align-items: center; }
/* The separator trails each item, so a wrapped line can end on a dot but
   never start with one. */
.hc .hc-meta .hc-m:not(:last-child)::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: #ccc; margin: 0 10px; }
.hc .hc-lede {
  font-size: 20px; line-height: 1.6; color: var(--hp-ink); margin: 0 0 8px;
  max-width: 64ch;
}

/* Sections are separated by space and one hairline, not boxed: a job page is
   one argument read top to bottom, not a dashboard of cards. */
.hc-sec { padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--hp-line); }
.hc-sec h2 { margin-top: 0; }
.hc-mod > p { max-width: 64ch; }
.hc-prose p, .hc-prose li { font-size: 17px; line-height: 1.7; color: var(--hp-body); }
.hc-prose ul { padding-left: 20px; margin: 0 0 18px; }
.hc-prose strong { color: var(--hp-ink); font-weight: 600; }

/* ------------------------------------------------------------- pay ruler -- */
/* This role sits above the line, the typical figure below it, so the two
   labels can never collide however close the numbers are. */
.hc-ruler { margin: 22px 0 18px; }
.hc-r-track {
  position: relative; height: 100px;
  background: linear-gradient(to bottom, transparent 49px, var(--hp-line-strong) 49px, var(--hp-line-strong) 51px, transparent 51px);
}
.hc-r-dot {
  position: absolute; top: 46px; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: rgba(111, 127, 173, 0.28);
}
.hc-r-me, .hc-r-mid { position: absolute; transform: translateX(-50%); display: flex; align-items: center; }
.hc-r-me { top: 0; height: 58px; flex-direction: column; z-index: 2; }
.hc-r-me::after { content: ''; flex: 1; width: 3px; margin-top: 6px; background: var(--hp-accent); border-radius: 2px; }
.hc-r-mid { top: 44px; height: 56px; flex-direction: column-reverse; z-index: 1; }
.hc-r-mid::after { content: ''; flex: 1; width: 2px; margin-bottom: 4px; background: rgba(26, 26, 26, 0.3); }
.hc-r-me b, .hc-r-mid i { white-space: nowrap; font-size: 13px; line-height: 1.2; padding: 3px 9px; border-radius: 999px; }
.hc-r-me b { color: #fff; background: var(--hp-accent); font-weight: 600; }
.hc-r-mid i { font-style: normal; color: var(--hp-muted); background: var(--hp-paper); border: 1px solid var(--hp-line); }
/* Near the ends, labels hang inward from the marker; the stem stays on it. */
.hc-r-me.is-l, .hc-r-mid.is-l { transform: translateX(-6px); align-items: flex-start; }
.hc-r-me.is-r, .hc-r-mid.is-r { transform: translateX(calc(-100% + 6px)); align-items: flex-end; }
.hc-r-me.is-l::after { margin-left: 4.5px; }
.hc-r-me.is-r::after { margin-right: 4.5px; }
.hc-r-mid.is-l::after { margin-left: 5px; }
.hc-r-mid.is-r::after { margin-right: 5px; }
.hc-ruler figcaption {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--hp-muted); margin-top: 6px;
}

/* -------------------------------------------------------------- figures -- */
.hc-figure { font-size: 17px; color: var(--hp-body); margin: 14px 0 12px; }
.hc-figure b {
  font-family: 'General Sans', sans-serif; font-size: 34px; font-weight: 560;
  letter-spacing: -0.025em; color: var(--hp-ink); margin-right: 6px; line-height: 1.1;
}
.hc-figure-sm { font-size: 14px; color: var(--hp-muted); margin: 8px 0 12px; }
.hc-est {
  display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
  background: rgba(111, 127, 173, 0.1); color: var(--hp-accent-dark);
  font-size: 12px; font-weight: 500; vertical-align: 3px;
}
.hc-meter {
  height: 8px; border-radius: 999px; background: rgba(26, 26, 26, 0.06);
  overflow: hidden; margin: 16px 0 0; max-width: 420px;
}
.hc-meter span { display: block; height: 100%; background: var(--hp-accent); border-radius: 999px; }

/* ------------------------------------------------------------ fact rows -- */
.hc-dl { margin: 14px 0 16px; display: grid; gap: 0; max-width: 560px; }
.hc-dl div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--hp-line);
}
.hc-dl div:first-child { border-top: 1px solid var(--hp-line); }
.hc-dl dt { color: var(--hp-muted); font-size: 15px; }
.hc-dl dd { margin: 0; color: var(--hp-ink); font-size: 15px; font-weight: 600; text-align: right; }

/* --------------------------------------------------------------- checks -- */
.hc-check, .hc-checks li { position: relative; padding-left: 28px; color: var(--hp-body); }
.hc-check { font-size: 17px; margin: 14px 0 10px; }
.hc .hc-checks { list-style: none; padding: 0; margin: 14px 0 12px; }
.hc-checks li { font-size: 16px; margin: 0 0 8px; }
.hc-check.is-ok::before, .hc-checks li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--hp-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---------------------------------------------------------------- chips -- */
.hc .hc-chips { list-style: none; padding: 0; margin: 16px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.hc-chips li {
  padding: 7px 13px; border-radius: 999px; font-size: 14px;
  border: 1px solid var(--hp-line-strong); background: var(--hp-card); color: var(--hp-body);
}
.hc-chips li.is-asked { background: rgba(111, 127, 173, 0.1); border-color: rgba(111, 127, 173, 0.35); color: var(--hp-accent-dark); font-weight: 600; }
.hc-chips li span { color: var(--hp-muted); margin-left: 4px; }

/* ---------------------------------------------------------------- steps -- */
/* Numbered because a selection process is a sequence. */
.hc .hc-steps { list-style: none; counter-reset: s; padding: 0; margin: 16px 0 14px; }
.hc-steps li { counter-increment: s; position: relative; padding: 0 0 14px 40px; }
.hc-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--hp-accent); color: var(--hp-accent-dark);
  font: 600 13px/24px 'Manrope', sans-serif; text-align: center;
}
.hc-steps b { display: block; font-family: 'General Sans', sans-serif; font-weight: 560; color: var(--hp-ink); font-size: 17px; }
.hc-steps span { display: block; color: var(--hp-body); font-size: 15px; margin-top: 2px; }

/* ------------------------------------------------------------------ CTA -- */
/* The homepage's own primary action: the black pill. */
.hc-cta { margin: 38px 0 6px; padding: 26px 0 0; border-top: 1px solid var(--hp-line); }
.hc-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #1a1a1a; color: #fffef6 !important; text-decoration: none !important;
  font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 600;
  padding: 15px 28px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.12);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.hc-cta-btn:hover { background: #000; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(26, 26, 26, 0.16); }
.hc-cta-btn:focus-visible { outline: 3px solid var(--hp-accent); outline-offset: 3px; }
.hc-cta p { font-size: 14px; color: var(--hp-muted); margin: 12px 0 0; }

/* ------------------------------------------------------------------ FAQ -- */
.hc-qa { padding: 16px 0; border-bottom: 1px solid var(--hp-line); }
.hc-qa:last-child { border-bottom: 0; }
.hc-qa h3 { margin: 0 0 6px; font-size: 18px; }
.hc-qa p { margin: 0; font-size: 16px; }

@media (max-width: 780px) {
  .hc .hc-lede { font-size: 18px; }
  .hc-figure b { font-size: 28px; }
  .hc-r-mid i, .hc-r-me b { font-size: 12px; padding: 2px 7px; }
  .hc-dl div { flex-direction: column; gap: 2px; }
  .hc-dl dd { text-align: left; }
  .hc-cta-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-cta-btn { transition: none; }
}

/* ------------------------------------------------------------ job lists -- */
/* seo-pages.css styles job lists twice (.jobs li and ul.jobs li); the second
   pads the card and the link pads it again. Here the link owns the padding,
   so the whole card is the tap target, and the meta line goes back to body
   type instead of inheriting the title's weight. */
.hc ul.jobs li { padding: 0; }
.hc ul.jobs .m { font-family: 'Manrope', sans-serif; font-weight: 400; letter-spacing: 0; }
.hc ul.jobs .m .co { font-weight: 500; }