/* Tier Beta landing page (/employers/first-hire/).
   Deltas only. This page loads nav.css, then employer.css, then this file.
   employer.css already owns the :root tokens plus .hero, .fit-strip,
   .fit-chip, .hero-cta-row, .callnote, .eyebrow, .process/.step,
   .panel-bg, .fee-box, .scope-box, .chip-row, .repeat-cta and the whole
   .sample-card block, all of which this page reuses unchanged.

   Sharing employer.css rather than duplicating those rules into a
   standalone stylesheet is a deliberate deviation from the build spec's
   suggestion of a self-contained assets/firsthire.css: the two pages share
   the hero, step and sample-report components, and two copies of that CSS
   would drift the first time either page is restyled. */

/* ---------- fee headline ---------- */
.fee-headline{font-size:1.6rem; font-weight:800; color:var(--navy);
  letter-spacing:-0.02em; margin-bottom:8px}
.fee-headline .from{font-size:.62em; font-weight:700; color:var(--grey);
  display:block; letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px}
.fee-secondary{margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  font-size:.95rem; color:var(--grey)}
.fee-vat{font-size:.85rem; color:var(--grey); margin-top:10px}

/* ---------- pilot block ---------- */
.pilot-card{background:var(--navy); color:#fff; border-radius:12px;
  padding:32px 34px; margin-top:6px}
.pilot-card h2{color:#fff; font-size:1.5rem; letter-spacing:-0.02em; margin-bottom:14px}
.pilot-card p{color:#dce7fa; font-size:1.02rem; line-height:1.65; margin-bottom:0; max-width:62ch}
.pilot-card .eyebrow{color:var(--ice)}
.pilot-card .pilot-cta{margin-top:24px}
.pilot-card .btn-primary{background:var(--blue-bright)}
.pilot-card .btn-primary:hover{background:#4b81e0}

/* ---------- founder note ---------- */
.founder{border:1px solid var(--line); border-radius:12px; padding:28px 30px;
  background:#fff; max-width:70ch}
.founder h2{font-size:1.3rem; color:var(--navy); margin-bottom:12px; letter-spacing:-0.02em}
.founder p{font-size:1rem; color:var(--ink); line-height:1.7; margin-bottom:12px}
.founder p:last-child{margin-bottom:0}
.founder .sig{font-weight:700; color:var(--navy)}

/* ---------- FAQ ---------- */
.faq-list{max-width:70ch; margin-top:10px}
.faq-item{border-top:1px solid var(--line); padding:22px 0}
.faq-item:first-child{border-top:0; padding-top:6px}
.faq-item h3{font-size:1.08rem; color:var(--navy); margin-bottom:8px; letter-spacing:-0.01em}
.faq-item p{font-size:.98rem; color:var(--ink); line-height:1.65; margin-bottom:0}
.faq-item p+p{margin-top:10px}

/* ---------- closing CTA ---------- */
.closing{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#fff; text-align:center}
.closing h2{color:#fff; font-size:1.9rem; margin-bottom:12px; letter-spacing:-0.02em}
.closing p{color:#cdd9ef; font-size:1.05rem; max-width:52ch; margin:0 auto 26px}
.closing .callnote{display:block; margin-top:16px; color:#aebfdf; font-size:.88rem}
.closing .callnote a{color:#fff}

@media (max-width:600px){
  .pilot-card{padding:26px 22px}
  .pilot-card h2{font-size:1.3rem}
  .founder{padding:24px 22px}
  .closing h2{font-size:1.5rem}
}

/* Spec section 5 sets a reduced-motion accessibility floor. employer.css,
   which this page also loads, turns on html{scroll-behavior:smooth} with no
   reduced-motion override, so the override is added here for this page.
   employer.css itself still lacks one, which affects the employer page: raised
   as a separate pre-existing item rather than changed unasked. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.btn-primary,.nav-cta,.btn-nav-outline{transition:none}
}

/* ---------- page width ---------- */
/* employer.css sets .wrap{max-width:900px}, which is narrower than the
   homepage and the services page (both 1080px). This page is a campaign
   destination with a five-across process row, so it takes the wider measure:
   it now matches those two pages instead of sitting visibly narrower.
   The employer page itself is left at 900px, which suits its form. */
.wrap{max-width:1080px}

/* ---------- five-step process row ---------- */
/* employer.css hard-codes .process to four columns, because the employer page
   has four steps. This page has five, so the fifth was dropping to a row of
   its own. Overridden here rather than in employer.css so the employer page's
   four-step row is untouched.
   The ladder avoids leaving a single orphaned card at every width: five across,
   then three plus two, then two plus two with the last card spanning the full
   width, then one. */
.process{grid-template-columns:repeat(5,1fr); gap:16px}
.process .step{padding:20px 18px}
@media (max-width:1040px){
  .process{grid-template-columns:repeat(3,1fr); gap:20px}
}
@media (max-width:760px){
  .process{grid-template-columns:repeat(2,1fr)}
  .process .step:last-child{grid-column:1 / -1}
}
@media (max-width:480px){
  .process{grid-template-columns:1fr}
  .process .step:last-child{grid-column:auto}
}