/* ============================================================
   SabiHire - Nigeria's job marketplace
   Design system: Flat Design + Marketplace/Directory pattern
   Typography: Plus Jakarta Sans (single-family system)
   Heaviest weight is 800 - the family has no 900. Asking for 900 renders
   800 anyway, so it is written as 800 rather than left to the fallback.
   Brand: Gold (#E6A817) + Deep Red (#A8121F)
   ============================================================ */

:root {
  --red: #a8121f;
  --red-hover: #8c0f1a;
  --red-dark: #7e0e17;
  --red-deep: #560a10;
  --gold: #e6a817;
  --gold-hover: #c98c07;
  --gold-light: #f7c948;
  --gold-pale: #fdf3d7;
  --gold-text: #8a6403;          /* gold that passes 4.5:1 on white */
  --ink: #221512;
  --ink-soft: #55443f;
  --muted: #7a6a64;
  --cream: #faf6ef;
  --paper: #ffffff;
  --line: #e9ddcc;
  --green: #1e7d43;
  --radius: 10px;
  --radius-lg: 14px;
  --font: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --ease: 180ms ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Every size on the site is in rem and nothing sets a root size, so this one
   line scales the whole page - text, cards, padding and gaps together.

   A percentage rather than 17px: someone who has raised their browser's
   default font size because they need it keeps that, and gets 6% on top.
   Hardcoding px would silently overrule them. */
/* The `hidden` attribute means hidden.

   Browsers apply it as `[hidden] { display: none }` at the lowest priority, so
   any component that sets its own display - `.auth-panel { display: flex }` -
   silently wins and the element stays in the layout. It happened on the sign-up
   page: the employer panel was invisible but still holding a grid cell, which
   pushed the form into a second row and left a column of empty space above it.

   Declared once here so no component has to remember. */
[hidden] { display: none !important; }

html {
  font-size: 106.25%;   /* 17px against a 16px default */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-weight: 400;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; }

.container { width: min(1160px, 92%); margin: 0 auto; }

/* Inline icon sizing */
.i {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  vertical-align: -0.2em;
}

/* Accessibility: visible focus for keyboard users */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Buttons (flat, uppercase, color-shift hover) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
  white-space: nowrap;
}

.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-hover); }

.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-hover); }

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.btn-outline:hover { background: #fff; color: var(--red-deep); border-color: #fff; }

.btn-outline-dark {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline-dark:hover { background: var(--ink); color: #fff; }

.btn-sm { padding: 10px 18px; font-size: 0.76rem; }
.btn-lg { padding: 17px 34px; font-size: 0.92rem; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--red-deep);
  border-bottom: 1px solid rgba(247, 201, 72, 0.28);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 0;
}
/* The logo is now a single artwork file rather than a mark plus live text,
   so it always matches the brand sheet exactly. */
.logo { display: flex; align-items: center; }
.logo img { height: 38px; width: auto; display: block; }
.site-footer .logo img { height: 34px; }

/* Brand asset sheet */
.brand-sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.brand-tile {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px;
  background: #fff;
  display: grid;
  place-items: center;
  min-height: 190px;
}
.brand-tile.on-dark { background: var(--red-deep); border-color: var(--red-deep); }
.brand-tile img { max-height: 96px; width: auto; }
.brand-caption {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 14px;
  text-align: center;
}
.swatches { display: flex; flex-wrap: wrap; gap: 14px; }
.swatch { flex: 1 1 150px; }
.swatch .chip-color {
  height: 84px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: 8px;
}
.swatch b { display: block; font-size: 0.86rem; }
.swatch code {
  font-size: 0.8rem;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
}
.nav-links a {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  font-size: 0.9rem;
  /* A two-word label must never break in half. Without this, "Find Jobs"
     becomes "FIND" over "JOBS" as soon as the row runs short, which reads as
     two separate links. */
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}
.nav-links a:hover, .nav-links a.active {
  color: var(--gold-light);
  border-color: var(--gold-light);
}
.nav-cta { display: flex; gap: 10px; align-items: center; }

/* Signed-in account chip */
.account-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(247, 201, 72, 0.35);
  color: #fff;
  transition: background var(--ease), border-color var(--ease);
}
.account-chip:hover { background: rgba(255, 255, 255, 0.18); border-color: var(--gold-light); }
.account-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--red-deep);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.account-name {
  font-size: 0.85rem;
  font-weight: 600;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Auth links duplicated into the mobile dropdown; hidden on desktop. */
.nav-links .mobile-only { display: none; }

/* ---------- Account dropdown ---------- */
.account-menu { position: relative; }
.account-menu .account-chip {
  font-family: var(--font);
  cursor: pointer;
  border: 1px solid rgba(247, 201, 72, 0.35);
}
.account-chip .chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--ease);
}
.account-chip[aria-expanded="true"] .chev { transform: rotate(180deg); }

.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: 0 14px 40px rgba(34, 21, 18, 0.18);
  opacity: 0;
  transform: translateY(-6px);
  /* pointer-events rather than visibility: transitioning visibility is
     unreliable across engines, and this keeps the closed menu unclickable. */
  pointer-events: none;
  transition: opacity var(--ease), transform var(--ease);
  z-index: 80;
  display: none;
}
.account-dropdown.open {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-head {
  padding: 12px 14px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.dropdown-head b {
  display: block;
  font-size: 0.92rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown-head span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background var(--ease), color var(--ease);
}
.account-dropdown a:hover,
.account-dropdown a:focus-visible { background: var(--cream); color: var(--red); }
.account-dropdown a.danger { color: var(--red); }
.account-dropdown a.danger:hover { background: #fdeaec; }
.dropdown-divider { height: 1px; background: var(--line); margin: 6px 0; }

/* ---------- Social links ---------- */
.social-row { display: flex; gap: 10px; flex-wrap: wrap; }
.social-link {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.8);
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.social-link svg { width: 17px; height: 17px; }
.social-link:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
/* On a light background - the contact page */
.social-row.on-light .social-link {
  background: var(--cream);
  border-color: var(--line);
  color: var(--ink-soft);
}
.social-row.on-light .social-link:hover { background: var(--gold); color: var(--ink); }

/* ---------- Share a vacancy ---------- */
.share-block { margin-top: 18px; }
.share-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 10px;
}
.share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.share-btn {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.share-btn svg { width: 17px; height: 17px; }
.share-btn:hover { border-color: var(--gold); color: var(--ink); }
.share-btn.whatsapp:hover { background: #25D366; border-color: #25D366; color: #fff; }
.share-btn.x:hover        { background: #000;    border-color: #000;    color: #fff; }
.share-btn.linkedin:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.share-btn.facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.share-btn.email:hover,
.share-btn.copy:hover     { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.share-btn.copied { background: var(--green); border-color: var(--green); color: #fff; }

/* Count of vacancies waiting on a reviewer */
.nav-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--red-deep);
  border-radius: 999px;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 5px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  vertical-align: 1px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.7rem;
  cursor: pointer;
}

/* ---------- Hero (flat: solid ground + flat geometric accents) ---------- */
.hero {
  position: relative;
  background: var(--red-deep);
  color: #fff;
  overflow: hidden;
}
.hero-shape {
  position: absolute;
  border-radius: 50%;
  border: 3px solid rgba(247, 201, 72, 0.25);
  pointer-events: none;
}
.hero-shape.s1 { width: 420px; height: 420px; top: -140px; right: -100px; }
.hero-shape.s2 { width: 220px; height: 220px; bottom: -70px; left: -60px; border-color: rgba(247, 201, 72, 0.15); }
.hero-shape.s3 {
  width: 90px; height: 90px;
  top: 80px; left: 46%;
  background: var(--gold);
  border: none;
  opacity: 0.14;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  padding: 88px 0 100px;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(247, 201, 72, 0.12);
  border: 1px solid rgba(247, 201, 72, 0.45);
  color: var(--gold-light);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.hero-kicker svg.flag { width: 20px; height: 13px; border-radius: 2px; }
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero h1 .accent { color: var(--gold-light); }
.hero p.lead {
  font-size: 1.14rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  max-width: 540px;
  margin-bottom: 36px;
}

/* Hero search - the primary CTA of a marketplace */
.hero-search {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap: 10px;
  background: #fff;
  padding: 10px;
  border-radius: var(--radius-lg);
  border: 3px solid var(--gold);
  max-width: 660px;
}
.hero-search .field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-right: 1px solid var(--line);
  color: var(--muted);
}
.hero-search .field:last-of-type { border-right: none; }
.hero-search input, .hero-search select {
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 0.98rem;
  color: var(--ink);
  background: transparent;
  width: 100%;
  padding: 12px 0;
  cursor: text;
}
.hero-search select { cursor: pointer; }
.hero-stats {
  display: flex;
  gap: 44px;
  margin-top: 44px;
}
.hero-stats .stat b {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--gold-light);
  letter-spacing: -0.02em;
}
.hero-stats .stat span {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
}

/* Faces strip - a bit of human proof next to the numbers */
.face-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}
.face-stack { display: flex; }
.face-stack img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--red-deep);
  margin-left: -12px;
  background: var(--red-dark);
}
.face-stack img:first-child { margin-left: 0; }
.face-strip p {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  line-height: 1.45;
}
.face-strip b { color: var(--gold-light); }

/* Hero visual: a real face, with live vacancies layered over it */
.hero-visual { position: relative; min-height: 470px; }
.hero-photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 4px solid var(--gold);
  aspect-ratio: 4 / 5;
  max-width: 380px;
  margin-left: auto;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Warms the photo into the brand and keeps white card text readable over it */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(86, 10, 16, 0.18), rgba(86, 10, 16, 0.55));
  pointer-events: none;
}
.float-card {
  position: absolute;
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
  border-left: 5px solid var(--gold);
  padding: 18px 20px;
  width: 280px;
  animation: floaty 6s ease-in-out infinite;
}
.float-card .fc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.float-card .fc-logo {
  width: 42px; height: 42px;
  border-radius: 9px;
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.float-card .fc-logo .i { width: 20px; height: 20px; }
.float-card h4 { font-size: 0.98rem; font-weight: 700; }
.float-card small { color: var(--muted); font-size: 0.8rem; }
.float-card .fc-pay { font-weight: 700; color: var(--green); font-size: 0.9rem; }
.fc-1 { top: 40px; left: -30px; animation-delay: 0s; }
.fc-2 { bottom: 30px; left: -50px; animation-delay: 1.8s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold-pale);
  color: var(--gold-text);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
}
.badge-verified .i { width: 0.95em; height: 0.95em; }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 54px; }
.section-kicker {
  display: inline-block;
  color: var(--red);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.section-head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.section-head p { color: var(--ink-soft); font-size: 1.02rem; }

/* Category grid (flat cards, icon-forward) */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  transition: border-color var(--ease), background var(--ease);
  display: block;
  cursor: pointer;
}
.cat-card:hover { border-color: var(--gold); background: var(--gold-pale); }
.cat-card .cat-icon {
  width: 50px; height: 50px;
  border-radius: var(--radius);
  background: var(--gold-pale);
  color: var(--gold-text);
  display: grid; place-items: center;
  margin-bottom: 16px;
  transition: background var(--ease), color var(--ease);
}
.cat-card:hover .cat-icon { background: var(--gold); color: var(--ink); }
.cat-card .cat-icon .i { width: 24px; height: 24px; }
.cat-card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 4px; }
.cat-card span { color: var(--muted); font-size: 0.85rem; }

/* Job cards (flat) */
.job-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.job-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--ease);
  position: relative;
  cursor: pointer;
}
.job-card:hover { border-color: var(--red); }
.job-card .jc-head { display: flex; align-items: flex-start; gap: 14px; }
.jc-logo {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  display: grid; place-items: center;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.job-card h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; }
.job-card .jc-company { color: var(--muted); font-size: 0.87rem; }
.jc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 11px;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.tag.hot { background: var(--gold-pale); border-color: var(--gold); color: var(--gold-text); }
.tag .i { width: 0.9em; height: 0.9em; }
.jc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: auto;
}
.jc-pay { font-weight: 800; color: var(--green); font-size: 0.95rem; }
.jc-pay small { color: var(--muted); font-weight: 500; }
.jc-new {
  position: absolute;
  top: -10px;
  right: 18px;
  background: var(--red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 6px;
}

/* The whole card is a link to the full vacancy */
.jc-link { color: inherit; }
.jc-link:hover h3 { color: var(--red); }

/* ---------- Job detail page ---------- */
.job-detail {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 22px;
  align-items: start;
}
.job-description {
  white-space: pre-wrap;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
/* The sidebar sticks as one piece while the description scrolls beside it.

   Sticking the apply panel on its own was wrong twice over: a sticky element is
   free to slide down over later siblings, so for an employer viewing their own
   vacancy it slid straight over the "Edit This Vacancy" and "View Applicants"
   buttons and made them unclickable - and for everyone else the panel was the
   only child, leaving no room to slide, so it never actually stuck.

   Sticking the <aside> fixes both: its containing block is the grid row, which
   is as tall as the description column, so there is real room to travel, and
   the panels inside move together and can never overlap each other. */
.job-detail > aside {
  position: sticky;
  top: 90px;
  align-self: start;   /* without this the aside stretches and cannot stick */
}
.salary-headline {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 20px;
}
.salary-headline span {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
/* Employer's own application address */
.apply-email {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--gold-pale);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  text-align: center;
}
.apply-email span {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-text);
  margin-bottom: 6px;
}
.apply-email a {
  font-weight: 700;
  color: var(--ink);
  word-break: break-all;
  font-size: 0.95rem;
}
.apply-email a:hover { color: var(--red); text-decoration: underline; }
.copy-email {
  display: block;
  margin: 10px auto 0;
  background: none;
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 5px 12px;
  font-family: var(--font);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-text);
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.copy-email:hover { background: var(--gold); color: var(--ink); }

/* Applicant list */
.applicant-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
}
.applicant-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 12px;
}
.applicant-head h3 { font-size: 1.05rem; margin-bottom: 4px; }
.applicant-head a { color: var(--red); font-weight: 600; font-size: 0.9rem; }
.applicant-letter {
  white-space: pre-wrap;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--cream);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 12px;
}

.detail-list { margin-top: 24px; border-top: 1px solid var(--line); }
.detail-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}
.detail-item:last-child { border-bottom: none; }
.detail-item span { color: var(--muted); flex-shrink: 0; }
.detail-item b { text-align: right; font-weight: 600; }

/* Review queue */
.queue-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 26px;
  margin-bottom: 18px;
}
.queue-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 16px;
}
.queue-head h3 { font-size: 1.12rem; margin-bottom: 4px; }
.queue-head .who { color: var(--muted); font-size: 0.85rem; }
.queue-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 20px;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
  font-size: 0.86rem;
}
.queue-meta div span { color: var(--muted); display: block; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.06em; }
.queue-desc {
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-height: 190px;
  overflow-y: auto;
  border-left: 3px solid var(--line);
  padding-left: 16px;
  margin-bottom: 18px;
}
.queue-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.queue-actions input {
  flex: 1 1 240px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 14px;
  font-family: var(--font);
  font-size: 0.9rem;
  background: var(--cream);
  outline: none;
}
.queue-actions input:focus { border-color: var(--gold); background: #fff; }
.btn-approve { background: var(--green); color: #fff; }
.btn-approve:hover { background: #14592f; }

/* Aggregated listings: sourced from another board, always linked back */
.job-card.is-external { border-left: 4px solid var(--gold); }
.jc-source {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -2px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--gold-pale);
  color: var(--gold-text);
  font-size: 0.82rem;
  font-weight: 600;
  transition: background var(--ease), color var(--ease);
}
.jc-source:hover { background: var(--gold); color: var(--ink); }
.jc-source .i { width: 15px; height: 15px; }

/* How it works */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 5px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}
.step .step-num {
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--gold);
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.step h3 { font-size: 1.12rem; font-weight: 700; margin-bottom: 8px; }
.step p { color: var(--ink-soft); font-size: 0.94rem; }

/* Photo + copy split, used by "How it works" */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
}
.split-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 25 / 16;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 4px solid var(--gold);
  display: block;
}
.split .section-head { text-align: left; margin: 0 0 26px; max-width: none; }

/* Trust & Safety (marketplace pattern requirement) */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.trust-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
}
.trust-card .trust-icon {
  width: 54px; height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--gold-pale);
  color: var(--red);
  display: grid; place-items: center;
}
.trust-card .trust-icon .i { width: 26px; height: 26px; }
.trust-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.trust-card p { color: var(--ink-soft); font-size: 0.88rem; }

/* Dual CTA band (flat, split) */
.band {
  background: var(--red-deep);
  border-radius: var(--radius-lg);
  color: #fff;
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.band::after {
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 3px solid rgba(247, 201, 72, 0.2);
  top: -110px; right: -80px;
  pointer-events: none;
}
.band-col { position: relative; z-index: 1; }
.band-photo {
  width: 100%;
  /* The width/height attributes reserve space against layout shift, but they
     also set a specified height that would beat aspect-ratio. */
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  border: 3px solid var(--gold);
  margin-bottom: 22px;
  display: block;
}
.band-col h3 {
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.band-col h3 span { color: var(--gold-light); }
.band-col p { color: rgba(255, 255, 255, 0.82); margin-bottom: 24px; font-size: 0.96rem; }
.band-col:first-child { border-right: 1px solid rgba(255, 255, 255, 0.18); padding-right: 40px; }

/* Testimonials */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quote-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.quote-card .stars { display: flex; gap: 3px; color: var(--gold); margin-bottom: 14px; }
.quote-card .stars .i { width: 16px; height: 16px; }
.quote-card p { font-size: 0.96rem; color: var(--ink-soft); margin-bottom: 18px; }
.quote-who { display: flex; align-items: center; gap: 12px; }
.quote-who .avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  color: #fff;
}
.quote-who b { display: block; font-size: 0.92rem; }
.quote-who span { color: var(--muted); font-size: 0.8rem; }

/* ---------- Homepage visual direction ---------- */
.home-page {
  --home-ink: #201514;
  --home-paper: #fffdf9;
  --home-lime: #c9ed55;
  --home-orange: #f26b38;
  background: var(--home-paper);
}

.home-page .site-header {
  background: var(--red-deep);
  border-bottom: 0;
  box-shadow: 0 8px 24px rgba(86, 10, 16, 0.16);
}

.home-page .nav {
  padding-top: 17px;
  padding-bottom: 17px;
}

.home-page .nav-links a {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}

.home-page .hero {
  background:
    linear-gradient(118deg, rgba(86, 10, 16, 0.98) 0%, rgba(126, 14, 23, 0.96) 58%, rgba(168, 18, 31, 0.94) 100%);
}

.home-page .hero::after {
  content: "NAIJA TALENT / REAL OPPORTUNITY";
  position: absolute;
  right: -74px;
  bottom: 42px;
  color: rgba(255, 255, 255, 0.12);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  transform: rotate(-90deg);
  transform-origin: center;
  pointer-events: none;
}

.home-page .hero-inner {
  padding-top: 102px;
  padding-bottom: 112px;
}

.home-page .hero-kicker {
  background: var(--home-lime);
  border-color: var(--home-lime);
  color: var(--home-ink);
  border-radius: 999px;
  padding: 9px 17px;
}

.home-page .hero h1 {
  max-width: 700px;
  font-size: clamp(3rem, 7vw, 5.55rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
}

.home-page .hero h1 .accent {
  display: block;
  color: var(--home-lime);
}

.home-page .hero p.lead {
  max-width: 585px;
  font-size: 1.05rem;
  line-height: 1.7;
}

.home-page .hero-search {
  max-width: 710px;
  border: 0;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 18px 36px rgba(34, 8, 10, 0.22);
}

.home-page .hero-search .field { border-right-color: #e7ded2; }

.home-page .hero-search .btn-red {
  background: var(--home-orange);
  border-color: var(--home-orange);
  border-radius: 10px;
}

.home-page .hero-search .btn-red:hover {
  background: #d95528;
  border-color: #d95528;
}

.home-page .hero-stats {
  gap: 0;
  max-width: 710px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.home-page .hero-stats .stat {
  min-width: 150px;
  padding-right: 28px;
  margin-right: 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.home-page .hero-stats .stat:last-child { border-right: 0; }
.home-page .hero-stats .stat b { color: var(--home-lime); font-size: 1.9rem; }

.home-page .hero-visual { min-height: 520px; }

.home-page .hero-photo {
  max-width: 405px;
  border: 0;
  border-radius: 44% 12px 12px 12px;
  box-shadow: 18px 18px 0 var(--home-lime);
  transform: rotate(2deg);
}

.home-page .hero-photo::after {
  background: linear-gradient(160deg, rgba(86, 10, 16, 0.02), rgba(86, 10, 16, 0.5));
}

.home-page .float-card {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 16px 30px rgba(34, 8, 10, 0.2);
}

.home-page .fc-1 { left: -52px; }
.home-page .fc-2 { left: -72px; }

.home-page .section { padding-top: 88px; padding-bottom: 88px; }

.home-page .section:nth-of-type(even) { background: #f7f1e8; }

.home-page .section-head { max-width: 700px; margin-bottom: 38px; }

.home-page .section-head h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.8rem);
  letter-spacing: -0.045em;
}

.home-page .section-kicker { color: var(--red); letter-spacing: 0.18em; font-size: 0.7rem; }
.home-page .cat-grid { gap: 10px; }

.home-page .cat-card {
  border: 0;
  border-radius: 10px;
  padding: 22px 18px 18px;
  box-shadow: 0 2px 0 #e4d6c5;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}

.home-page .cat-card:hover {
  border-color: transparent;
  background: var(--home-lime);
  box-shadow: 0 6px 0 #9ebc33;
  transform: translateY(-3px);
}

.home-page .cat-card .cat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 14px;
}

.home-page .job-card {
  border: 0;
  border-top: 4px solid var(--red);
  border-radius: 10px;
  box-shadow: 0 3px 0 #e4d6c5;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.home-page .job-card:hover {
  border-color: var(--red);
  border-top-color: var(--home-orange);
  box-shadow: 0 6px 0 #e4d6c5;
  transform: translateY(-3px);
}

.home-page .split-photo { border: 0; border-radius: 10px; box-shadow: 10px 10px 0 var(--home-orange); }

.home-page .step,
.home-page .trust-card {
  border: 0;
  border-radius: 10px;
  box-shadow: 0 2px 0 #e4d6c5;
}

.home-page .step { border-top: 4px solid var(--home-lime); }
.home-page .step .step-num { color: var(--red); font-size: 2rem; }
.home-page .trust-card .trust-icon { background: var(--home-lime); color: var(--home-ink); width: 48px; height: 48px; }

.home-page .band { border-radius: 10px; box-shadow: 8px 8px 0 var(--home-lime); }

/* Testimonials - de-emphasized: smaller, muted, single column on mobile */
.home-page .quote-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.home-page .quote-card {
  opacity: 0.55;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 0 #e4d6c5;
}
.home-page .quote-card p { font-size: 0.85rem; line-height: 1.6; }
.home-page .quote-who .avatar { width: 36px; height: 36px; font-size: 0.75rem; }
.home-page .quote-who b { font-size: 0.8rem; }
.home-page .quote-who span { font-size: 0.7rem; }
.home-page .quote-card .stars .i { width: 14px; height: 14px; }

@media (max-width: 960px) {
  .home-page .hero-inner { padding-top: 76px; padding-bottom: 86px; }
  .home-page .hero-visual { display: block; min-height: 470px; }
  .home-page .fc-1 { left: -18px; }
  .home-page .fc-2 { left: -28px; }
  .home-page .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .home-page .job-grid { grid-template-columns: repeat(2, 1fr); }
  .home-page .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .home-page .quote-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .home-page .hero::after { display: none; }
  .home-page .hero-inner { padding-top: 60px; padding-bottom: 70px; }
  .home-page .hero h1 { font-size: clamp(2.8rem, 14vw, 4rem); }
  .home-page .hero-visual { min-height: 420px; }
  .home-page .fc-1 { left: 8px; }
  .home-page .fc-2 { left: 8px; }
  .home-page .hero-stats .stat { min-width: 0; padding-right: 14px; margin-right: 14px; }
  .home-page .hero-stats .stat b { font-size: 1.45rem; }
  .home-page .hero-stats .stat span { font-size: 0.65rem; letter-spacing: 0.05em; }
  .home-page .section { padding-top: 64px; padding-bottom: 64px; }
  .home-page .band { box-shadow: 6px 6px 0 var(--home-lime); }
  .home-page .cat-grid { grid-template-columns: 1fr; }
  .home-page .job-grid { grid-template-columns: 1fr; }
  .home-page .trust-grid { grid-template-columns: 1fr; }
  .home-page .quote-grid { grid-template-columns: 1fr; }
  .home-page .step { padding: 24px 20px; }
  .home-page .trust-card { padding: 22px 18px; }
  .home-page .quote-card { padding: 18px; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: var(--red-deep);
  color: #fff;
  padding: 60px 0 76px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  border: 3px solid rgba(247, 201, 72, 0.18);
  top: -140px; right: -90px;
  pointer-events: none;
}
.page-hero h1 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.page-hero p { color: rgba(255, 255, 255, 0.82); max-width: 560px; margin: 0 auto; position: relative; z-index: 1; }

/* ---------- Jobs page ---------- */
.filter-bar {
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: grid;
  /* Seven controls in a five-column grid meant two of them wrapped onto a
     second row at a fixed width, and at 17px "All categories" no longer fit
     its 128px column.

     auto-fit lets the row hold as many as fit and wrap the rest, and the
     170px floor is set by the longest label rather than by how many controls
     there happen to be - so adding an eighth filter later cannot silently
     squeeze the others until they truncate. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-top: -40px;
  position: relative;
  z-index: 5;
}
.filter-bar input, .filter-bar select {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--cream);
  outline: none;
  width: 100%;
  transition: border-color var(--ease);
}
.filter-bar select { cursor: pointer; }
.filter-bar input:focus, .filter-bar select:focus { border-color: var(--gold); }

.results-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 34px 0 20px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.results-meta b { color: var(--ink); }

.empty-state {
  text-align: center;
  padding: 70px 20px;
  color: var(--muted);
}
.empty-state .big { color: var(--gold); margin-bottom: 14px; }
.empty-state .big .i { width: 54px; height: 54px; }
.empty-state h3 { text-transform: uppercase; }

/* ---------- Forms ---------- */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 5px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 760px;
  margin: -44px auto 0;
  position: relative;
  z-index: 5;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.form-field label .req { color: var(--red); }
.form-field input, .form-field select, .form-field textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  font-family: var(--font);
  font-size: 0.96rem;
  background: var(--cream);
  color: var(--ink);
  outline: none;
  transition: border-color var(--ease), background var(--ease);
}
.form-field select { cursor: pointer; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--gold);
  background: #fff;
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-hint { font-size: 0.8rem; color: var(--muted); text-transform: none; letter-spacing: 0; }

/* ── CV writing service page ── */
.cv-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
}
.cv-tiers > * { min-width: 0; }
.cv-tier {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.cv-tier.featured {
  border: 2px solid var(--gold);
  box-shadow: 0 10px 30px rgba(34, 21, 18, 0.08);
}
.cv-tag {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--gold);
  color: var(--maroon, #560a10);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 999px;
}
.cv-tier h3 { margin: 0 0 2px; font-size: 1.15rem; }
.cv-exp { margin: 0 0 14px; font-size: 0.85rem; color: var(--muted); }
.cv-price {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--red);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.cv-blurb { margin: 10px 0 16px; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.6; }
.cv-list { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.cv-list li {
  position: relative;
  padding: 7px 0 7px 24px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.cv-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 800;
}

.cv-extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.cv-extras > * { min-width: 0; }
.cv-extra {
  background: var(--sand, #fdf3d7);
  border-radius: 10px;
  padding: 16px 18px;
}
.cv-extra b { display: block; font-size: 0.95rem; margin-bottom: 4px; }
.cv-extra span { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; }

.cv-needs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.cv-needs > * { min-width: 0; }
.cv-need { display: flex; gap: 14px; align-items: flex-start; }
.cv-need-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cv-need b { display: block; margin-bottom: 5px; font-size: 0.98rem; }
.cv-need p { margin: 0; font-size: 0.89rem; color: var(--ink-soft); line-height: 1.6; }

.cv-picker { display: grid; gap: 10px; margin-bottom: 8px; }
.cv-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
}
.cv-option:hover { border-color: var(--gold); }
.cv-option input { margin-top: 3px; flex: 0 0 auto; }
.cv-option b { display: block; font-size: 0.95rem; }
.cv-option small {
  display: block;
  margin-top: 3px;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.5;
}
.cv-option.is-disabled { opacity: 0.45; cursor: not-allowed; }

.cv-total {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 22px 0 6px;
  padding: 18px 20px;
  background: var(--maroon, #560a10);
  border-radius: 12px;
  color: #fff;
}
.cv-total > span {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-light, #f7c948);
}
.cv-total b { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }
.cv-total small { font-size: 0.82rem; color: #d8c6bd; margin-left: auto; }

.form-section-title {
  margin: 26px 0 12px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
}

/* Security question on the sign-in / sign-up / reset forms */
.human-check {
  margin: 4px 0 18px;
  padding: 16px;
  background: var(--cream, #faf6ef);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.human-check > label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 10px;
}
.human-check .hc-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 3px;
}
.hc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hc-question {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.95rem;
  flex: 1 1 190px;
  min-width: 0;
}
.hc-row input {
  flex: 0 1 150px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
  background: #fff;
}
.hc-row input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.hc-refresh {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink-soft);
}
.hc-refresh:hover { background: var(--cream, #faf6ef); color: var(--red); }

/* CAC certificate preview inside a review card */
.cert-frame {
  width: 100%;
  height: 520px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 16px 0 4px;
  background: #fff;
}
.cert-image {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 16px 0 4px;
}

/* Verification status badge - the big circle on verify-business.html */
.verify-badge {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  line-height: 1;
}
.verify-badge.ok   { background: #dff5e4; color: #1d7a3a; }
.verify-badge.wait { background: #fdf3d7; color: #8a6a12; }

/* Honeypot. Moved off-screen rather than display:none, because the bots worth
   catching skip fields that are hidden the obvious way. Nobody sees it and
   tabindex="-1" keeps it out of the keyboard path, so only a script fills it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Policy warning at the top of the posting form */
.notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fdeaec;
  border: 1px solid #f0a8b0;
  border-left: 5px solid var(--red);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 28px;
}
.notice .i { width: 22px; height: 22px; color: var(--red); flex-shrink: 0; margin-top: 2px; }
.notice b {
  display: block;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
  margin-bottom: 5px;
}
.notice p { font-size: 0.9rem; color: #6b0d15; line-height: 1.55; }

/* Grouped sections inside a long form */
.form-section { margin-bottom: 34px; }
.form-section > h3 {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--red);
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--line);
}

/* Radio option cards */
.radio-set { display: grid; gap: 10px; }
.radio-set.inline { grid-template-columns: 1fr 1fr; }
.radio-opt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.radio-opt:hover { border-color: var(--gold); }
.radio-opt input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--red);
  cursor: pointer;
  flex-shrink: 0;
}
.radio-opt:has(input:checked) { border-color: var(--gold); background: var(--gold-pale); }
.radio-opt input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.radio-opt b { display: block; font-size: 0.92rem; font-weight: 700; }
.radio-opt span { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; }

/* Revealed only when its parent option is chosen */
.conditional { display: none; margin-top: 12px; }
.conditional.show { display: block; }

/* Paid add-on block */
.addon {
  border: 2px dashed var(--gold);
  background: var(--gold-pale);
  border-radius: var(--radius);
  padding: 20px;
}
.addon-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.addon-head b { font-size: 0.95rem; }
.addon-price {
  background: var(--red);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 6px;
  white-space: nowrap;
}
.addon p { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: 14px; }

.char-count { font-size: 0.78rem; color: var(--muted); text-align: right; }
.char-count.over { color: var(--red); font-weight: 700; }

/* A <label> is display:inline by default, so its block children were
   fragmenting the dashed border across separate line boxes. */
.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  border: 2px dashed var(--gold);
  background: var(--gold-pale);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
  color: var(--ink);
}
.upload-zone:hover { background: #fbeec2; border-color: var(--gold-text); }
.upload-zone:focus-within {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.upload-zone .uz-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: var(--gold-text);
  margin-bottom: 8px;
}
.upload-zone .uz-icon .i { width: 26px; height: 26px; }
.upload-zone b {
  display: block;
  font-weight: 700;
  font-size: 0.96rem;
  line-height: 1.35;
}
.upload-zone span {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 32ch;
}
.upload-zone input { display: none; }

.upload-zone.has-file {
  border-style: solid;
  background: #f2fbf5;
  border-color: var(--green);
}
.upload-zone.has-file .uz-icon { color: var(--green); }
.upload-zone.is-busy { opacity: 0.7; pointer-events: none; }

.form-success {
  background: #f2fbf5;
  border: 1px solid #9ed4b2;
  color: var(--green);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-weight: 600;
  margin-bottom: 20px;
  display: none;
  align-items: center;
  gap: 10px;
}
.form-success.show { display: flex; }
.form-success a { text-decoration: underline; }

.form-error {
  display: none;
  background: #fdeaec;
  border: 1px solid #f0a8b0;
  border-left: 4px solid var(--red);
  color: #8c0f1a;
  border-radius: var(--radius);
  padding: 13px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 18px;
}
.form-error.show { display: block; }

/* ---------- Account page ---------- */
.account-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
}
.account-head .big-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--red-deep);
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  font-weight: 800;
  flex-shrink: 0;
}
.account-head h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.account-head p { color: var(--muted); font-size: 0.92rem; }
.plan-badge {
  display: inline-block;
  background: var(--gold-pale);
  color: var(--gold-text);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 3px 11px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-left: 8px;
}
.account-cols {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  align-items: start;
}
/* Grid items default to min-width:auto, so a long <option> or an unbreakable
   string can push a column past its track and scroll the whole page sideways. */
.account-cols > *,
.form-grid > *,
.split > * { min-width: 0; }
.form-field select,
.form-field input,
.form-field textarea { max-width: 100%; }
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
}
.panel h2 {
  font-size: 1.05rem;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.panel > p.sub { color: var(--muted); font-size: 0.88rem; margin-bottom: 22px; }
.my-job {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.my-job:last-child { border-bottom: none; }
.my-job b { display: block; font-size: 0.95rem; }
.my-job span { color: var(--muted); font-size: 0.82rem; }
.status-pill {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 5px;
}
.status-pill.live { background: #e8f6ed; color: var(--green); }
.status-pill.closed { background: var(--cream); color: var(--muted); }

/* ---------- SabiPro ---------- */
.pro-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Locked feature: shows what's behind the wall rather than just hiding it. */
.pro-lock {
  background: var(--gold-pale);
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}
.pro-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.pro-lock-badge .i { width: 13px; height: 13px; }
.pro-lock h3 { font-size: 1.05rem; margin-bottom: 8px; }
.pro-lock p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 18px; }

/* Profile strength */
.meter {
  height: 10px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--gold));
  border-radius: 999px;
  transition: width 300ms ease;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
}
.file-row .i { width: 24px; height: 24px; color: var(--red); flex-shrink: 0; }
.file-row > div:nth-child(2) { flex: 1; min-width: 0; }
.file-row b { display: block; font-size: 0.92rem; word-break: break-all; }
.file-row span { color: var(--muted); font-size: 0.8rem; }

.video-preview {
  width: 100%;
  border-radius: var(--radius);
  border: 2px solid var(--gold);
  background: #000;
  display: block;
}

/* Candidate search results */
.candidate-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 14px;
  transition: border-color var(--ease);
}
.candidate-card:hover { border-color: var(--gold); }
.candidate-card.is-pro { border-left: 5px solid var(--gold); }
.candidate-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.candidate-head h3 { font-size: 1.05rem; margin-bottom: 3px; }
.candidate-head .meta { color: var(--muted); font-size: 0.85rem; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.skill-tag {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------- Dashboard ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 26px;
}
.stat-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.stat-tile b {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 4px;
}
.stat-tile span {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.stat-tile.accent { border-top-color: var(--red); }

/* Application tracker rows */
.track-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.track-row:last-child { border-bottom: none; }
.track-row b { display: block; font-size: 0.98rem; margin-bottom: 3px; }
.track-row b a:hover { color: var(--red); }
.track-row .meta { color: var(--muted); font-size: 0.84rem; }
.track-row .closed-note {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

/* Pipeline colours, in the order a candidate moves through them */
.stage {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 5px;
  white-space: nowrap;
}
.stage-submitted     { background: var(--cream);  color: var(--ink-soft); border: 1px solid var(--line); }
.stage-under-review  { background: #eef4fb;       color: #26557f; }
.stage-shortlisted   { background: var(--gold-pale); color: var(--gold-text); }
.stage-interviewing  { background: #f3ecfa;       color: #6b3f96; }
.stage-offered       { background: #e8f6ed;       color: var(--green); }
.stage-not-selected  { background: #fdeaec;       color: #8c0f1a; }

.dash-section { margin-bottom: 22px; }
.dash-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.dash-head a { font-size: 0.84rem; font-weight: 700; color: var(--red); }

.empty-panel { text-align: center; padding: 30px 20px; }
.empty-panel .i { width: 40px; height: 40px; color: var(--gold); margin-bottom: 12px; }
.empty-panel p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 18px; }

/* Status selector on the employer's applicant list */
.stage-select {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
}
.stage-select:focus { border-color: var(--gold); outline: none; }

/* ── The nav becomes a hamburger at 900px, not 680px ──

   Five links plus the account chip plus a call to action stopped fitting on one
   line once the root size went up 6%. Squeezing the type further would have
   made it unreadable to win a few pixels, so the menu takes over earlier
   instead. The single-column layout rules stay at 680px - that is about the
   content, and it did not change. */
@media (max-width: 900px) {
  /* Sign In moves into the dropdown rather than disappearing. */
  /* Sign In moves into the hamburger rather than disappearing. The account
     chip becomes a circle but still opens its menu on tap. */
  .nav-links, .nav-cta .btn-outline, .nav-cta .account-name,
  .account-chip .chev { display: none; }
  .nav-links .mobile-only { display: block; }
  .account-chip { padding: 4px; border-radius: 50%; }
  .account-dropdown { min-width: 210px; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--red-deep);
    padding: 20px 6%;
    gap: 16px;
    border-bottom: 1px solid rgba(247, 201, 72, 0.28);
  }
}

/* ── Nav on small laptops and tablets ──

   The hamburger only takes over below 680px, so between there and a full
   desktop the whole nav has to fit on one line. Raising the root size by 6%
   pushed it over on a ~1000px window and the links wrapped onto three lines.

   Tightened rather than hidden: someone on a small laptop should still get the
   real navigation, not a hamburger they have to open for every move. */
@media (max-width: 1080px) and (min-width: 901px) {
  .nav { gap: 16px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 0.82rem; letter-spacing: 0.04em; }
  .logo img { height: 32px; }
}

@media (max-width: 960px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .stat-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-tile { padding: 16px 18px; }
  .stat-tile b { font-size: 1.6rem; }
  .track-row { grid-template-columns: 1fr; }
}

/* ---------- Pricing ---------- */
.plan-toggle {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px;
  margin: 0 auto 44px;
  gap: 4px;
}
.plan-toggle button {
  border: none;
  background: transparent;
  padding: 11px 26px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background var(--ease), color var(--ease);
}
.plan-toggle button.active { background: var(--red); color: #fff; }
.toggle-wrap { text-align: center; }

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.price-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color var(--ease);
}
.price-card:hover { border-color: var(--gold); }
.price-card.featured {
  background: var(--red-deep);
  color: #fff;
  border: 2px solid var(--gold);
}
.price-card.featured .price small,
.price-card.featured .plan-desc { color: rgba(255, 255, 255, 0.75); }
.plan-flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 6px;
}
.price-card h3 { font-size: 1.15rem; font-weight: 800; text-transform: uppercase; margin-bottom: 6px; }
.plan-desc { color: var(--muted); font-size: 0.88rem; margin-bottom: 22px; }
.price { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 24px; }
.price small { font-size: 0.9rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan-features { list-style: none; margin-bottom: 30px; flex-grow: 1; }
.plan-features li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  font-size: 0.94rem;
}
.plan-features .tick { color: var(--gold-text); margin-top: 3px; }
.plan-features .tick .i { width: 1em; height: 1em; }
.price-card.featured .plan-features .tick { color: var(--gold-light); }

/* ---------- FAQ ---------- */
.faq { max-width: 720px; margin: 0 auto; }
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 12px;
}
.faq details[open] { border-color: var(--gold); }
.faq summary {
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--red); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 12px; color: var(--ink-soft); font-size: 0.94rem; }

/* ---------- Legal pages ---------- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px;
}
.legal-updated {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 24px;
}
.legal-lead {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.75;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.legal h2 {
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 34px 0 12px;
  padding-top: 6px;
}
.legal h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 22px 0 8px;
  color: var(--red);
}
.legal p {
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 14px;
  font-size: 0.96rem;
}
.legal ul { margin: 0 0 16px 0; padding-left: 0; list-style: none; }
.legal li {
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: 0.96rem;
  padding: 5px 0 5px 26px;
  position: relative;
}
/* A gold dash rather than a bullet, so lists match the flat brand */
.legal li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 15px;
  width: 12px;
  height: 2px;
  background: var(--gold);
}
.legal a { color: var(--red); font-weight: 600; }
.legal a:hover { text-decoration: underline; }
.legal strong, .legal b { color: var(--ink); }

.legal-warn {
  background: #fdeaec;
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 4px 0 18px;
}
.legal-note {
  background: var(--gold-pale);
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 40px;
}
.legal-note b { display: block; margin-bottom: 6px; color: var(--gold-text); }
.legal-note p { margin: 0; font-size: 0.92rem; }

@media (max-width: 680px) {
  .legal { padding: 28px 22px; }
  .legal h2 { font-size: 1.1rem; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.75);
  padding: 64px 0 30px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 44px;
}
.footer-grid h4 {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 10px; font-size: 0.9rem; }
.footer-grid a { transition: color var(--ease); }
.footer-grid a:hover { color: var(--gold-light); }
.footer-brand p { font-size: 0.9rem; margin-top: 14px; max-width: 280px; }
.footer-social {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: 4px;
}
.footer-social-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--ink);
  border-left: 5px solid var(--gold);
  color: #fff;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
  z-index: 100;
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast .gold { color: var(--gold-light); }

/* ---------- Signup / Auth ---------- */
.auth-section { padding: 70px 0 90px; }
.auth-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  /* No overflow:hidden here. It was clipping the two halves into the rounded
     corners, but it also made position:sticky impossible for anything inside -
     a scroll container cannot have a sticky child that escapes it. Each half
     rounds its own outer corners instead, which clips nothing. */
}
.auth-panel {
  background: var(--red-deep);
  color: #fff;
  padding: 56px 48px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.auth-form {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.auth-panel::after {
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 3px solid rgba(247, 201, 72, 0.2);
  bottom: -120px; right: -90px;
  pointer-events: none;
}
.auth-panel h1 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.auth-panel h1 span { color: var(--gold-light); }
.auth-panel > p {
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}
.auth-benefits { list-style: none; position: relative; z-index: 1; }
.auth-benefits li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 0;
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.9);
}
.auth-benefits .i { color: var(--gold-light); margin-top: 4px; }
.auth-form { padding: 48px; }
/* ---------- Social sign-in ---------- */
.oauth-row {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}
.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.oauth-btn:hover {
  background: var(--cream);
  border-color: var(--muted);
}
.oauth-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.oauth-btn svg { flex-shrink: 0; }

/* "or use your email" rule between the buttons and the form */
.oauth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.oauth-divider::before,
.oauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Waiting state on auth-complete.html */
.spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 20px;
  border: 3px solid var(--line);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.auth-form h2 {
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.auth-form > p.sub { color: var(--muted); font-size: 0.92rem; margin-bottom: 26px; }

/* Category preference chips (checkbox-based, keyboard accessible) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.chip span {
  display: inline-block;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.chip input:checked + span {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.chip input:focus-visible + span {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.check-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--gold-pale);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
}
.check-row input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--red);
  cursor: pointer;
  flex-shrink: 0;
}
.check-row b { display: block; font-size: 0.92rem; }
.check-row span { font-size: 0.82rem; color: var(--ink-soft); }

.auth-success {
  display: none;
  text-align: center;
  padding: 40px 20px;
}
.auth-success.show { display: block; }
.auth-success .big-icon {
  width: 70px; height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #f2fbf5;
  color: var(--green);
  display: grid;
  place-items: center;
}
.auth-success .big-icon .i { width: 34px; height: 34px; }
.auth-success h2 { text-transform: uppercase; margin-bottom: 10px; }
.auth-success p { color: var(--ink-soft); max-width: 380px; margin: 0 auto 8px; }
.auth-success p b { color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; padding: 60px 0 70px; }
  .hero-visual { display: none; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .split-photo { aspect-ratio: 2 / 1; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .job-grid { grid-template-columns: repeat(2, 1fr); }
  .steps, .quote-grid, .price-grid { grid-template-columns: 1fr; }
  .job-detail { grid-template-columns: 1fr; }
  /* One column on narrow screens: the sidebar sits under the description, so
     sticking it would pin it over the content instead of beside it. */
  .job-detail > aside { position: static; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .band { grid-template-columns: 1fr; padding: 36px; }
  .auth-grid { grid-template-columns: 1fr; }
  /* Stacked, the halves sit above one another, so the rounding follows the
     stack: the panel caps the top and the form caps the bottom. Left-and-right
     rounding here would cut into the middle of the card. */
  .auth-panel {
    padding: 40px 32px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .auth-form {
    padding: 32px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  .account-cols { grid-template-columns: 1fr; }
  .band-col:first-child { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.18); padding-right: 0; padding-bottom: 32px; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .hero-search { grid-template-columns: 1fr; }
  .hero-search .field { border-right: none; border-bottom: 1px solid var(--line); }
  .hero-stats { gap: 24px; flex-wrap: wrap; }
  .cat-grid, .job-grid, .trust-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 26px; }
  .radio-set.inline { grid-template-columns: 1fr; }
  .filter-bar { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 10px; }
}

/* ── One-tap WhatsApp share, shown after a vacancy is approved ──
   WhatsApp has no API that can post into an existing group, so the message is
   composed on the server and a reviewer sends it with a single tap. */
.wa-prompt {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-left: 4px solid #25D366;
  background: #f2fbf5;
}
.wa-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-icon svg { width: 24px; height: 24px; }
.wa-prompt b { display: block; font-size: 1rem; margin-bottom: 4px; }
.wa-prompt p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; }
.wa-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn-whatsapp {
  background: #25D366;
  color: #fff;
  border: none;
}
.btn-whatsapp:hover { background: #1da851; color: #fff; }

/* ── Printable receipt ──
   Laid out so the printed page is the document: the site chrome drops away and
   what's left is something a customer can file or hand to an accountant. */
.receipt-sheet {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 34px 32px;
}
.receipt-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 3px solid var(--gold);
  margin-bottom: 26px;
}
.receipt-logo { height: 38px; width: auto; }
.receipt-meta { text-align: right; display: flex; flex-direction: column; gap: 3px; }
.receipt-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.receipt-meta b { font-size: 1.05rem; letter-spacing: 0.02em; }
.receipt-paid {
  align-self: flex-end;
  margin-top: 4px;
  background: #dff5e4;
  color: #1d7a3a;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
}
.receipt-table { width: 100%; border-collapse: collapse; }
.receipt-table th {
  text-align: left;
  vertical-align: top;
  width: 42%;
  padding: 12px 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.receipt-table td {
  padding: 12px 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.receipt-table tr:first-child th,
.receipt-table tr:first-child td { border-top: none; }
.receipt-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--maroon, #560a10);
  border-radius: 12px;
  color: #fff;
}
.receipt-total > span {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-light, #f7c948);
}
.receipt-total b { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.receipt-foot {
  margin: 24px 0 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--muted);
  text-align: center;
}

@media print {
  .no-print, .site-header, .site-footer, .nav, #sabiToast { display: none !important; }
  body { background: #fff; }
  .section { padding: 0 !important; }
  .receipt-sheet { border: none; border-radius: 0; padding: 0; }
  /* Print the maroon total band rather than letting the browser drop it. */
  .receipt-total { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── The CAC-verified badge ──
   Sits under the company name on every card and at the top of every vacancy.
   Green rather than gold on purpose: gold is the brand and reads as decoration,
   green reads as a check that passed. Deliberately quiet - a badge that shouts
   looks like an advert for itself rather than a statement of fact. */
.jc-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 9px 3px 7px;
  background: #e7f6ea;
  color: #1a6b34;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.jc-verified svg { flex: 0 0 auto; }

/* On the vacancy page it carries more weight - this is the moment someone
   decides whether to hand over their CV. */
.job-verified {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 16px;
  background: #e7f6ea;
  border-left: 4px solid #1a6b34;
  border-radius: 8px;
  color: #14572a;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.5;
}
.job-verified span { font-weight: 500; color: #2c6b41; }

@media (max-width: 560px) {
  .jc-verified { font-size: 0.66rem; }
}

/* ── Reviewer list on the admin page ──
   Rows rather than cards: this is a short list of people, not a work queue. */
.reviewer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.reviewer-row:last-child { border-bottom: 0; }
.reviewer-row .who { color: var(--muted); font-size: 0.85rem; }
.reviewer-side {
  display: flex;
  align-items: center;
  gap: 14px;
}
.reviewer-since { color: var(--muted); font-size: 0.8rem; }
.reviewer-you {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e7f6ea;
  color: #1a6b34;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
}
.reviewer-add {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.reviewer-add input,
.reviewer-add select {
  flex: 1 1 200px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  background: #fff;
}

/* ── Employer logos ──
   The uploaded logo sits in the same 48px box as the monogram it replaces, so
   a board of mixed employers keeps its rhythm. Logos arrive at every shape and
   aspect ratio, so the image is contained rather than cropped - a wordmark
   stays readable instead of being cut in half - on white, because most logos
   are drawn for a white background. */
.jc-logo-img {
  background: #fff;
  border: 1px solid var(--line);
  padding: 5px;
}
.jc-logo-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* The vacancy page: same idea, larger, against the dark hero. */
.job-hero-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
}
.job-hero-logo {
  width: 72px; height: 72px;
  flex-shrink: 0;
  background: #fff;
  border-radius: var(--radius);
  padding: 8px;
}
.job-hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 560px) {
  .job-hero-head { gap: 14px; }
  .job-hero-logo { width: 56px; height: 56px; padding: 6px; }
}

/* ── Logo upload on the settings page ── */
.logo-manage {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.logo-preview {
  width: 88px; height: 88px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}
.logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Company profile ──
   Used twice: as the live preview an employer edits against, and as the
   "About the company" panel a candidate reads on a vacancy. Deliberately the
   same markup in both places, so what the employer sees while editing is
   literally what gets rendered. */
.company-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.company-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.company-card-head .who {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 3px;
}
.company-logo {
  width: 64px; height: 64px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px;
}
.company-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.company-logo-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
  padding: 4px;
}
.company-about {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.65;
  white-space: pre-line;
}
.company-site {
  display: inline-block;
  margin-top: 14px;
  color: var(--red);
  font-weight: 600;
  font-size: 0.9rem;
}

/* A receipt from a provider's test keys. Loud on purpose: the number, the
   amount and the layout are identical to a real one, so the only thing
   stopping it being filed as revenue is this label. */
.receipt-test {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fdf3d7;
  border: 1px solid var(--gold);
  color: var(--gold-text);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Sitewide strip shown while payments run on test keys. */
.test-mode-strip {
  background: var(--gold-pale);
  border-bottom: 1px solid var(--gold);
  color: var(--gold-text);
  text-align: center;
  padding: 9px 16px;
  font-size: 0.84rem;
  font-weight: 600;
}

/* ── Admin tables ──
   Rows a reviewer scans rather than reads. Wrapped in an overflow-x container
   by the page, so a narrow screen scrolls the table instead of the page. */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 620px;
}
.admin-table th {
  text-align: left;
  padding: 13px 16px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  white-space: nowrap;
}
.admin-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .who {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 2px;
}
/* A payment that never completed. Legible, but clearly not money. */
.admin-table .row-muted td { opacity: 0.6; }

/* ── Admin tabs ──
   The admin page collects five unrelated jobs. Stacked down one page they read
   as a long thin list of mostly-empty panels; behind tabs each one gets the
   full width and the page opens on the work that is actually waiting. */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin-top: 26px;
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border: none;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.admin-tabs button:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.admin-tabs button.is-active {
  background: var(--cream);
  color: var(--ink);
}
/* Sits on the tab, so the number of things waiting is readable without
   opening anything. */
.tab-count {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}
.admin-tabs button.is-active .tab-count { background: var(--red); color: #fff; }

.admin-panel { display: none; }
.admin-panel.is-active { display: block; }

@media (max-width: 700px) {
  .admin-tabs button { padding: 11px 14px; font-size: 0.84rem; }
}

/* The one account nobody else can remove, demote, or re-plan. Gold rather than
   the green used for "you", because it means authority, not identity. */
.reviewer-owner {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--gold-pale);
  border: 1px solid var(--gold);
  color: var(--gold-text);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* A point of friction stated on the benefits panel rather than discovered
   later. Reads as part of the offer, not as a warning. */
.auth-note {
  margin-top: 26px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--gold);
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}
.auth-note b {
  display: block;
  margin-bottom: 4px;
  color: var(--gold-light);
}

/* ── How it works, on the sign-up panel ──
   The panel stretches to the form's height and the sign-up form is long, so
   this fills what was empty maroon with the thing people actually want to know
   before handing over their details: what happens next. */
.auth-steps {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.auth-steps h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold-light);
  margin: 0 0 16px;
}
.auth-steps ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.auth-steps li {
  position: relative;
  counter-increment: step;
  padding-left: 40px;
  margin-bottom: 18px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}
.auth-steps li:last-child { margin-bottom: 0; }
.auth-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--red-deep);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  line-height: 26px;
}
.auth-steps li b {
  display: block;
  color: #fff;
  font-size: 0.92rem;
  margin-bottom: 2px;
}

/* ── The sign-up panel, beside a long form ──

   Sign-up asks for eleven things, so the panel is stretched well past its
   content. Spread rather than centred: the writing reaches both ends of the
   maroon instead of clustering in the middle with a void above and below.

   Only on sign-up. Sign-in's panel is a close match for its form already, and
   spreading four short blocks over that height would pull them apart. */
@media (min-width: 901px) {
  .auth-grid-tall .auth-panel { justify-content: space-between; }
}

/* The industry chips are the tallest thing on the form by a wide margin: 18
   options wrapping into a block taller than everything above it put together.
   Capped and scrolled, so every option is still reachable but the form stops
   being three screens long. */
#catChips {
  max-height: 190px;
  overflow-y: auto;
  padding-right: 4px;
}

/* ── Choosing what kind of account this is ──
   This was a dropdown sitting seventh in a list of eleven fields, so people
   scrolled past it and signed up as the wrong thing. It decides what the whole
   account can do, so it is now the first thing on the form and looks like a
   decision rather than a field. */
.role-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.role-card {
  display: block;
  text-align: left;
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.role-card:hover { border-color: var(--gold); }
.role-card .i {
  width: 22px; height: 22px;
  color: var(--muted);
  margin-bottom: 8px;
}
.role-card b {
  display: block;
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 3px;
}
.role-card span {
  display: block;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}
.role-card.is-chosen {
  border-color: var(--red);
  background: #fdf7f7;
}
.role-card.is-chosen .i { color: var(--red); }
.role-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

@media (max-width: 480px) {
  .role-choice { grid-template-columns: 1fr; }
}

:#cookie-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--cream);
  padding: 1rem 2rem;
  z-index: 1000;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#accept-cookies {
  padding: 0.5rem 1rem;
  background: var(--gold);
  border: none;
  color: var(--ink);
  cursor: pointer;
}