/* VVeRecruit design system.
 *
 * Typography and palette are LOCKED by docs/brand/brand-guidelines.md — Space
 * Grotesk 700 for headlines, Inter for body, Electric Blue / Signal Cyan /
 * Momentum Coral. Both faces are self-hosted; the frontend must not depend on a
 * third party at runtime.
 *
 * The character comes from composition rather than novelty type: a hairline
 * grid that runs behind the page, section numbering that encodes the actual
 * sequence a role travels, and the mark's own two-V geometry echoed in rules
 * and accents.
 */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'InterVar';
  src: url('/assets/fonts/inter.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Dark-surface neutrals, derived not invented: tints of brand Fog (#F5F6FA)
     over brand Near-black (#0D0F22). Keeps the dark art direction inside the
     locked palette instead of introducing a second family of greys. */
  --on-dark:       #F5F6FA;
  --on-dark-body:  rgba(245,246,250,.74);
  --on-dark-mute:  rgba(245,246,250,.52);
  --on-dark-line:  rgba(245,246,250,.13);
  --on-dark-fill:  rgba(245,246,250,.05);

  /* brand — locked */
  --blue: #0A5CFF;
  --blue-deep: #0A4CE0;
  --blue-lift: #3E85FF;
  --cyan: #00E1D9;
  --cyan-deep: #00B8B0;
  --cyan-lift: #2FF0E8;
  --coral: #FF6B4A;

  /* neutrals — biased slightly toward the blue so greys read as chosen */
  --ink: #12142B;
  --slate: #5B6178;
  --mute: #8A90AC;
  --line: #E2E4ED;
  --line-soft: #EDEFF6;
  --fog: #F5F6FA;
  --paper: #FFFFFF;
  --night: #0B0E1E;
  --night-2: #101A44;

  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --body: 'InterVar', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --w: 1140px;
  --gut: 24px;
  --r: 14px;
  --shadow: 0 1px 2px rgba(18,20,43,.04), 0 12px 34px rgba(20,30,60,.07);
  --shadow-lift: 0 2px 6px rgba(18,20,43,.06), 0 22px 60px rgba(20,30,60,.12);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* ── layout ───────────────────────────────────────────────────────────── */
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--gut); }

section { padding: 88px 0; position: relative; }
section.tint { background: var(--fog); }
section.night { background: var(--night); color: #EEF0FB; }
section.night h2, section.night h3 { color: #fff; }
section.night p { color: #A9B2D6; }

/* Hairline grid behind tinted sections — structure made visible, not decoration */
section.tint::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(18,20,43,.035) 1px, transparent 1px);
  background-size: 76px 100%;
  pointer-events: none;
}

/* ── type ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(38px, 6vw, 62px); line-height: 1.04; }
h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; }
h3 { font-size: clamp(20px, 2.4vw, 25px); line-height: 1.25; }
p  { margin: 0 0 1.15em; max-width: 68ch; }
.lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--slate); max-width: 60ch; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.eyebrow {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
section.night .eyebrow { color: var(--cyan-lift); }

/* ── header ───────────────────────────────────────────────────────────── */
/* Header uses the brand's night gradient — the same #101A44 -> #0D0F22 pairing
   mastered for the app-icon tile — so the bar reads as part of the same surface
   as the hero rather than a separate strip laid over it. */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(135deg, rgba(16,26,68,.92), rgba(13,15,34,.94));
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--on-dark-line);
}
.site-head .bar { display: flex; align-items: center; gap: 28px; height: 68px; }
.site-head img { height: 30px; width: auto; display: block; }
.site-head nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.site-head nav a { font-size: 14.5px; color: var(--on-dark-body); text-decoration: none; font-weight: 500; }
.site-head nav a:hover { color: #fff; }
/* The nav link rule (0,2,1) outranks .btn-primary (0,1,0), so a button placed in
   the nav inherited the grey link colour and lost its contrast. Match the
   specificity rather than reaching for !important. */
.site-head nav a.btn-primary { color: #fff; }
.site-head nav a.btn-primary:hover { color: #fff; }
.site-head nav a.btn-ghost { color: #fff; background: transparent; border-color: var(--on-dark-mute); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body); font-size: 15px; font-weight: 600;
  padding: 13px 22px; border-radius: 10px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(10,92,255,.26); }
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(10,92,255,.32); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding: 92px 0 76px; position: relative; overflow: hidden; }
.hero:not(.dark)::after { /* the mark's two strokes, abstracted into the ground */
  content: ''; position: absolute; right: -180px; top: -120px; width: 620px; height: 620px;
  background:
    radial-gradient(closest-side, rgba(0,225,217,.16), transparent 70%),
    radial-gradient(closest-side, rgba(10,92,255,.14), transparent 70%);
  background-position: 60% 40%, 30% 60%; background-repeat: no-repeat;
  background-size: 70% 70%, 70% 70%;
  pointer-events: none;
}
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--mute); }

/* staggered load — one orchestrated moment, not scattered effects */
.rise { animation: rise .62s cubic-bezier(.22,.68,.36,1) both; }
.rise:nth-child(2) { animation-delay: .07s; }
.rise:nth-child(3) { animation-delay: .14s; }
.rise:nth-child(4) { animation-delay: .21s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── cards & grids ────────────────────────────────────────────────────── */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 26px 28px; box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #D3D8EA; }
.card h3 { margin-bottom: .35em; }
.card p { font-size: 15.5px; color: var(--slate); margin-bottom: 0; }
.card .ico { width: 38px; height: 38px; margin-bottom: 16px; display: block; }

/* numbered steps — the number means the actual sequence, not decoration */
.step { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step .n { font-family: var(--mono); font-size: 13px; color: var(--blue); padding-top: 5px; letter-spacing: .06em; }
.step h3 { font-size: 20px; margin-bottom: .3em; }
.step p { font-size: 15.5px; color: var(--slate); margin: 0; }

/* ── figures ──────────────────────────────────────────────────────────── */
figure { margin: 34px 0; }
figure img { width: 100%; height: auto; display: block; border-radius: var(--r); border: 1px solid var(--line); }
figcaption { font-size: 13.5px; color: var(--mute); margin-top: 10px; }

/* ── stat / callout ───────────────────────────────────────────────────── */
.pull {
  border-left: 3px solid var(--coral); padding: 6px 0 6px 20px; margin: 30px 0;
  font-family: var(--display); font-size: clamp(19px, 2.4vw, 23px); line-height: 1.35; letter-spacing: -.02em;
}
.stat { font-family: var(--display); font-size: clamp(30px, 4vw, 42px); letter-spacing: -.03em; line-height: 1; }
.stat + .stat-label { font-size: 14px; color: var(--slate); margin-top: 8px; }

/* ── multi-select pills ───────────────────────────────────────────────── */
/* Each option is a single pill: the checkbox and its text must not be pushed
   apart by justify/space rules, and a two-word option must not break mid-label. */
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: 14.5px; cursor: pointer; white-space: nowrap;
  transition: border-color .14s ease, background .14s ease;
}
.checks label:hover { border-color: var(--blue); }
.checks input { accent-color: var(--blue); margin: 0; flex: none; }
.checks label:has(input:checked) { border-color: var(--blue); background: #F2F6FF; }

/* ── campaign path chooser ────────────────────────────────────────────── */
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 860px; margin: 0 auto; }
.path {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  text-align: left; font: inherit; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 26px 24px; box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.path:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--blue); }
.path:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.path-role { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--ink); }
.path-desc { font-size: 15px; color: var(--slate); line-height: 1.55; }
.path-cta  { margin-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--blue); }

/* ── faq ──────────────────────────────────────────────────────────────── */
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { font-family: var(--display); font-weight: 700; font-size: 17.5px; cursor: pointer; list-style: none; display: flex; gap: 14px; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; color: var(--blue); font-family: var(--mono); font-size: 17px; }
.faq details[open] summary::before { content: '−'; }
.faq p { margin: 12px 0 0 28px; color: var(--slate); font-size: 15.5px; }

/* ── forms ────────────────────────────────────────────────────────────── */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10,92,255,.14); }
.alert { padding: 12px 15px; border-radius: 10px; font-size: 14.5px; margin-bottom: 16px; }
.alert-err { background: #FFF1ED; color: #A6371C; border: 1px solid #FFD5C9; }
.alert-ok { background: #E9FBF5; color: #0A7355; border: 1px solid #BFF0E0; }

/* ── footer ───────────────────────────────────────────────────────────── */
.site-foot { background: var(--night); color: #A9B2D6; padding: 58px 0 34px; font-size: 14.5px; }
.site-foot img { height: 30px; margin-bottom: 18px; }
.site-foot a { color: #CBD3EE; text-decoration: none; }
.site-foot a:hover { color: #fff; }
.site-foot .cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; }
.site-foot h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #6E77A0; margin-bottom: 12px; font-family: var(--mono); font-weight: 600; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-foot .base { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; color: #6E77A0; font-size: 13.5px; }

@media (max-width: 860px) {
  .site-head nav a.hide-sm { display: none; }
  /* The header must stay one line: at 375px both the "Log in" link and the CTA
     were wrapping, which doubled the header height and pushed the hero down. */
  .site-head nav { gap: 14px; }
  .site-head nav a { white-space: nowrap; }
  .site-head nav a.btn-primary { padding: 10px 14px; font-size: 14px; }
  .site-foot .cols { grid-template-columns: 1fr 1fr; }
  section { padding: 62px 0; }
}
@media (max-width: 520px) {
  .site-foot .cols { grid-template-columns: 1fr; }
}

/* ── manage: campaign leads ───────────────────────────────────────────── */
.lead-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.lead-tab {
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--slate);
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.lead-tab:hover { border-color: var(--blue); color: var(--ink); }
.lead-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.lead-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.lead-table th, .lead-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.lead-table th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); background: var(--fog); }
.lead-table tbody tr:last-child td { border-bottom: none; }
.lead-table td.open-problem { white-space: pre-wrap; min-width: 280px; max-width: 460px; color: var(--slate); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.badge-recruiter { background: #F2F6FF; color: var(--blue-deep); }
.badge-company { background: #E9FBF5; color: #0A7355; }

.fee-breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fee-breakdown li { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.fee-breakdown li:last-child { border-bottom: none; padding-bottom: 0; }
.fee-breakdown li span { color: var(--slate); }
.fee-breakdown li strong { font-family: var(--display); color: var(--ink); }

.empty-state { text-align: center; padding: 48px 26px; }
.empty-state p { margin: 0 auto; }

/* ══ homepage composition ═══════════════════════════════════════════════
   The homepage is composed, not compiled. Long-form prose lives on
   /for-employers and /for-recruiters; here the same arguments are carried by
   structure — comparison, sequence, and number — so the page can be scanned
   in fifteen seconds and still read in five minutes.                        */

/* split hero: argument left, evidence right */
.hero-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: center; }
@media (max-width: 940px) { .hero-split { grid-template-columns: 1fr; gap: 32px; } }
.hero-split img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); display: block; }

/* the scene-setting stat rail under the hero */
.rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px;
        background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 46px; }
.rail > div { background: var(--paper); padding: 22px 20px; }
.rail .n { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.rail .k { font-size: 13.5px; color: var(--slate); margin-top: 8px; line-height: 1.45; }

/* two-up comparison — "what a keyword search sees" vs "what we see" */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 780px) { .versus { grid-template-columns: 1fr; } }
.vs-col { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); overflow: hidden; }
.vs-col.win { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow); }
.vs-head { padding: 16px 22px; border-bottom: 1px solid var(--line-soft); font-family: var(--mono);
           font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.vs-col.win .vs-head { color: var(--blue); }
.vs-body { padding: 20px 22px 24px; }
.vs-body p { font-size: 15px; color: var(--slate); margin: 0 0 14px; }

/* the Should-Know task list, as the product actually shows it */
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tasks li { display: flex; align-items: center; justify-content: space-between; gap: 14px;
            padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; font-size: 14.5px; background: #fff; }
.tasks .lvl { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.lvl-daily { background: #E4FBF4; color: #0A7355; }
.lvl-rare  { background: #FFF3E8; color: #A6571C; }
.lvl-never { background: #F3F4F9; color: var(--mute); }

/* funnel: 30 → 10 → 7 local + 3 outstation */
.funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.fstep { position: relative; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 24px 22px; }
.fstep .fn { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--blue); text-transform: uppercase; }
.fstep .fbig { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -.035em; line-height: 1; margin: 10px 0 8px;
               background: linear-gradient(120deg, var(--blue-deep), var(--cyan-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fstep p { font-size: 14.5px; color: var(--slate); margin: 0; }

/* audience split — the two doors out of the homepage */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 780px) { .doors { grid-template-columns: 1fr; } }
.door { border: 1px solid rgba(255,255,255,.16); border-radius: var(--r); padding: 30px 28px; background: rgba(255,255,255,.04); }
.door h3 { color: #fff; margin-bottom: .4em; }
.door p { color: #A9B2D6; font-size: 15.5px; }
.door .btn { margin-top: 8px; }

/* money, stated plainly */
.money { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.money > div { border: 1px solid var(--line); border-radius: var(--r); padding: 24px; background: var(--paper); }
.money .amt { font-family: var(--display); font-size: 32px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.money .lbl { font-size: 14px; color: var(--slate); margin-top: 10px; }

/* ══ hub homepage ═══════════════════════════════════════════════════════
   The homepage explains a three-sided bridge and a compressed timeline, so
   the components here are about connection and elapsed time, not prose.   */

.hero-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items: center; }
@media (max-width: 940px) { .hero-split { grid-template-columns: 1fr; gap: 30px; } }
.hero-split img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); display: block; }

/* the three sides */
.sides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1000px) { .sides { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px)  { .sides { grid-template-columns: 1fr; } }
.side { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 26px 24px; box-shadow: var(--shadow); }
.side .who { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--blue); }
.side h3 { margin: 12px 0 .4em; font-size: 21px; }
.side p { font-size: 15px; color: var(--slate); margin: 0 0 12px; }
.side ul { margin: 0; padding-left: 18px; font-size: 14.5px; color: var(--slate); display: grid; gap: 6px; }

/* elapsed-time comparison: where the weeks go */
.clock { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .clock { grid-template-columns: 1fr; } }
.clock-col { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); overflow: hidden; }
.clock-col.fast { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow); }
.clock-head { padding: 16px 22px; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.clock-head .t { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.clock-head .v { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.02em; color: var(--ink); }
.clock-col.fast .clock-head .v { background: linear-gradient(120deg, var(--blue-deep), var(--cyan-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.clock-col ol { margin: 0; padding: 18px 22px 22px 40px; display: grid; gap: 11px; font-size: 14.5px; color: var(--slate); }
.clock-col ol li strong { color: var(--ink); font-weight: 600; }

/* the connection flow */
.flow { display: grid; gap: 14px; margin-top: 8px; }
.flow-row { display: grid; grid-template-columns: 92px 1fr; gap: 20px; align-items: start;
            padding: 20px 0; border-top: 1px solid var(--line); }
.flow-row:last-child { border-bottom: 1px solid var(--line); }
.flow-when { font-family: var(--mono); font-size: 12px; color: var(--blue); padding-top: 3px; letter-spacing: .04em; }
.flow-row h3 { font-size: 19px; margin: 0 0 .3em; }
.flow-row p { font-size: 15px; color: var(--slate); margin: 0; }
.flow-row .actor { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
                   text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }
.a-company   { background: #EAF1FF; color: var(--blue-deep); }
.a-recruiter { background: #E4FBF7; color: var(--cyan-deep); }
.a-candidate { background: #FFF0EB; color: #C2410C; }
.a-platform  { background: #F1F2F8; color: var(--slate); }

/* three doors */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.door { border: 1px solid rgba(255,255,255,.16); border-radius: var(--r); padding: 28px 26px; background: rgba(255,255,255,.05); }
.door h3 { color: #fff; margin-bottom: .4em; font-size: 20px; }
.door p { color: #A9B2D6; font-size: 15px; }
.door .btn { margin-top: 6px; }

/* money */
.money { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.money > div { border: 1px solid var(--line); border-radius: var(--r); padding: 24px; background: var(--paper); }
.money .amt { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.money .lbl { font-size: 14px; color: var(--slate); margin-top: 10px; }

/* task list for the competency example */
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tasks li { display: flex; align-items: center; justify-content: space-between; gap: 14px;
            padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; font-size: 14.5px; background: #fff; }
.tasks .lvl { font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.lvl-daily { background: #E4FBF4; color: #0A7355; }
.lvl-rare  { background: #FFF3E8; color: #A6571C; }
.lvl-never { background: #F3F4F9; color: var(--mute); }

.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 780px) { .versus { grid-template-columns: 1fr; } }
.vs-col { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); overflow: hidden; }
.vs-col.win { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow); }
.vs-head { padding: 15px 22px; border-bottom: 1px solid var(--line-soft); font-family: var(--mono);
           font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.vs-col.win .vs-head { color: var(--blue); }
.vs-body { padding: 20px 22px 24px; }
.vs-body p { font-size: 15px; color: var(--slate); margin: 0 0 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   "SIGNAL" — homepage art direction
   
   Ground: the brand's own night tile (#101A44 → #0D0F22) lifted into a hero
   with a luminous blue/cyan mesh and fine grain, so the page opens with depth
   rather than a white rectangle.
   
   Motif: the product's whole argument is ten lanes running in parallel instead
   of one queue running in sequence. That is drawn — lanes, not icons.
   ══════════════════════════════════════════════════════════════════════════ */

.dark {
  position: relative;
  background: #0D0F22;
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark p { color: var(--on-dark-body); }
.dark .eyebrow { color: var(--cyan-lift); }
.dark .eyebrow::before { background: linear-gradient(90deg, var(--cyan), transparent); }

/* luminous mesh — two brand-coloured pools, deliberately off-centre */
.dark::before {
  content: ''; position: absolute; inset: -25% -10% auto -10%; height: 150%;
  background:
    radial-gradient(42% 46% at 78% 18%, rgba(0,225,217,.20), transparent 70%),
    radial-gradient(46% 50% at 22% 32%, rgba(10,92,255,.28), transparent 72%),
    radial-gradient(38% 40% at 62% 82%, rgba(255,107,74,.10), transparent 70%);
  pointer-events: none; z-index: -2;
}
/* fine grain, so the gradients read as material rather than as a CSS blur */
.dark::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .30; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hero-dark { padding: 104px 0 96px; }
.hero-dark h1 { font-size: clamp(38px, 5.4vw, 66px); line-height: .98; letter-spacing: -.045em; }
.hero-dark .lede { color: var(--on-dark-body); font-size: clamp(18px, 2.1vw, 22px); max-width: 54ch; }
.hero-dark .hero-note { color: var(--on-dark-mute); }

/* hero grid: argument left, a live-looking panel right, overlapping the mesh */
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 60px; align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

/* the parallel-lanes panel — the product's thesis, drawn */
.lanes {
  border: 1px solid var(--on-dark-line); border-radius: 18px; padding: 26px 24px;
  background: var(--on-dark-fill); backdrop-filter: blur(8px);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.lanes .lanes-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.lanes .lanes-h span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-mute); }
.lane { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 14px; margin-bottom: 9px; }
.lane b { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--on-dark-mute); letter-spacing: .03em; }
.lane i { display: block; height: 8px; border-radius: 999px; background: var(--on-dark-line); position: relative; overflow: hidden; }
.lane i::after {
  content: ''; position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  width: var(--w, 60%);
  animation: fill 1.1s cubic-bezier(.22,.68,.36,1) both;
  animation-delay: var(--d, 0s);
}
@keyframes fill { from { width: 0; } to { width: var(--w, 60%); } }
.lanes .seq { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--on-dark-line); }
.lanes .seq .lane i::after { background: var(--on-dark-mute); }

/* oversized gradient numerals */
.bignum {
  font-family: var(--display); font-weight: 700; letter-spacing: -.05em; line-height: .86;
  font-size: clamp(52px, 8vw, 96px);
  background: linear-gradient(115deg, var(--blue-lift), var(--cyan-lift) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.light .bignum { background: linear-gradient(115deg, var(--blue-deep), var(--cyan-deep)); -webkit-background-clip: text; background-clip: text; }

/* scroll-reveal — one orchestrated motion language, not scattered effects */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22,.68,.36,1), transform .7s cubic-bezier(.22,.68,.36,1); }
.rv.in { opacity: 1; transform: none; }
.rv:nth-child(2) { transition-delay: .06s }
.rv:nth-child(3) { transition-delay: .12s }
.rv:nth-child(4) { transition-delay: .18s }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } .lane i::after { animation: none; width: var(--w,60%); } }

/* cards that carry a gradient hairline instead of a flat border */
.gcard { position: relative; border-radius: var(--r); background: var(--paper); padding: 28px 26px; border: 1px solid var(--line); }
.gcard::before {
  content: ''; position: absolute; left: 26px; right: 26px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  opacity: 0; transition: opacity .2s ease;
}
.gcard:hover::before { opacity: 1; }
.gcard:hover { border-color: var(--line); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.gcard { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }

/* dark variants of the existing components */
.dark .side, .dark .gcard { background: var(--on-dark-fill); border-color: var(--on-dark-line); box-shadow: none; }
.dark .side h3 { color: #fff; }
.dark .side p, .dark .side ul { color: var(--on-dark-body); }
.dark .side .who { color: var(--cyan-lift); }
.dark .flow-row { border-color: var(--on-dark-line); }
.dark .flow-row p { color: var(--on-dark-body); }
.dark .flow-when { color: var(--cyan-lift); }
.dark .money > div { background: var(--on-dark-fill); border-color: var(--on-dark-line); }
.dark .money .amt { color: #fff; }
.dark .money .lbl { color: var(--on-dark-body); }
.dark .faq details { border-color: var(--on-dark-line); }
.dark .faq summary { color: #fff; }
.dark .faq summary::before { color: var(--cyan-lift); }
.dark .faq p { color: var(--on-dark-body); }
.dark .btn-ghost { background: transparent; color: #fff; border-color: var(--on-dark-mute); }
.dark .btn-ghost:hover { border-color: var(--cyan); color: var(--cyan-lift); }

/* ── pipeline panel ─────────────────────────────────────────────────────
   Replaces the lanes motif. The proposition is now "a complete platform to
   manage the entire pipeline", so the hero shows the pipeline itself —
   stages, movement, and who is acting — rather than a count of recruiters. */
.pipe { border: 1px solid var(--on-dark-line); border-radius: 18px; padding: 22px 20px;
        background: var(--on-dark-fill); backdrop-filter: blur(8px); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.pipe-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.pipe-h span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-mute); }
.stage { display: grid; grid-template-columns: 104px 1fr auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--on-dark-line); }
.stage:first-of-type { border-top: 0; }
.stage b { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--on-dark-body); letter-spacing: .02em; }
.stage .chips { display: flex; gap: 5px; }
.stage .chip { width: 22px; height: 22px; border-radius: 6px; background: var(--on-dark-line);
               display: block; animation: pop .5s cubic-bezier(.22,.68,.36,1) both; animation-delay: var(--d,0s); }
.stage .chip.on { background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.stage .chip.warm { background: linear-gradient(135deg, var(--coral), #FF9C7A); }
.stage em { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--on-dark-mute); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stage .chip { animation: none; } }

/* ── job categories ─────────────────────────────────────────────────────
   A hub needs routes out. Each card is a link to that vertical on the jobs
   surface, so the section is navigation rather than a list of words.       */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1000px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px)  { .cats { grid-template-columns: 1fr; } }
.cat {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  padding: 26px 24px 24px; position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--blue), var(--cyan));
  transform: scaleY(0); transform-origin: top; transition: transform .22s cubic-bezier(.22,.68,.36,1);
}
.cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #D2D8EC; }
.cat:hover::before { transform: scaleY(1); }
.cat:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.cat h3 { font-size: 19px; margin: 0 0 .35em; }
.cat .roles { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.cat p { font-size: 14.8px; color: var(--slate); margin: 0 0 14px; }
.cat .go { font-size: 14px; font-weight: 600; color: var(--blue); }
.dark .cat { background: var(--on-dark-fill); border-color: var(--on-dark-line); }
.dark .cat h3 { color: #fff; }
.dark .cat p { color: var(--on-dark-body); }
.dark .cat .roles, .dark .cat .go { color: var(--cyan-lift); }

/* ── the VV ligature ────────────────────────────────────────────────────
   In the mark the two V strokes interlock; set in plain text they sit apart
   like any other pair of capitals and the connection is lost. Tightening only
   the gap BETWEEN the two V's pulls them together the way the logo does,
   without touching the spacing of the rest of the word.
   Applied to the first V alone — putting it on a "VV" span would also drag the
   following "e" inward. */
.vv { letter-spacing: -.1em; }
h1 .vv, h2 .vv, .site-head .vv { letter-spacing: -.13em; }
/* Tuned by eye. -.15em only closed the gap; -.3em fused the pair into a single
   W and the name read as "WeRecruit", losing the double-V spelling entirely.
   -.2em is the point where the diagonals genuinely overlap, as they do in the
   mark, while both V's stay legible. */

/* Footer tagline — sits between the lockup and the descriptor.
   Cyan brand accent, tracked slightly wider so it reads as a mark, not a sentence. */
.site-foot .foot-tagline{
  margin:.55rem 0 .7rem;
  font-family:var(--display);
  font-size:.815rem;
  font-weight:600;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--cyan-lift);
}

/* ---- Proof bar (homepage, directly under the hero) -------------------------
   Light band between two dark sections, so the numerals carry it rather than a
   background effect. Values are scope, not traction -- see the note in home.php. */
.proof { background: var(--fog); border-bottom: 1px solid var(--line); }
.proof-head { max-width: 62ch; }
.proof-head h2 { margin: .35rem 0 .6rem; }

.proof-bar {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.proof-bar > li {
  background: var(--paper);
  padding: 1.5rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  animation: proofRise .5s var(--d, 0s) both cubic-bezier(.2,.7,.3,1);
}
.proof-bar b {
  font-family: var(--display);
  font-size: clamp(2.35rem, 4.4vw, 3.1rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--blue) 10%, var(--cyan) 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.proof-bar b .unit { font-size: .5em; letter-spacing: -.01em; margin-left: .06em; }
.proof-bar strong { font-size: .935rem; font-weight: 650; color: var(--ink); }
.proof-bar span { font-size: .845rem; line-height: 1.5; color: var(--slate); }

.proof-foot { margin-top: 1.15rem; font-size: .86rem; color: var(--slate); }
.proof-foot a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

@keyframes proofRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .proof-bar > li { animation: none; } }

@media (max-width: 900px) { .proof-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .proof-bar { grid-template-columns: 1fr; } }

/* The ligature cannot work inside tracked uppercase type — the eyebrow's own
   letter-spacing reopens the gap and the name reads "V VeRecruit". Neutralise
   it so a stray .vv in that context degrades to normal spacing rather than a split. */
.eyebrow .vv, .who .vv, .chip .vv { letter-spacing: inherit; }

/* ============================================================================
   HOMEPAGE + FIND-JOBS MEGA  (Phase 2 — appended; no existing selectors edited)
   Mockup vars mapped to real tokens: --d→--display, --b→--body,
   --on-body→--on-dark-body, night pair = --night-2/--night.
   ========================================================================== */

/* --- Fixed header: solid by default; transparent only over the dark home hero,
       fills the night gradient on scroll, logo shrinks. -------------------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:100;
  background:linear-gradient(135deg,var(--night-2),var(--night));
  transition:background .25s ease,box-shadow .25s ease}
.site-head .bar{height:auto;padding:15px 0;transition:padding .2s ease}
.site-head img{height:46px;width:auto;transition:height .2s ease}
.site-head.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.30)}
.site-head.scrolled .bar{padding:8px 0}
.site-head.scrolled img{height:30px}
main{padding-top:84px}                 /* clear the fixed header on inner pages */
body.home .site-head{background:transparent}
body.home .site-head.scrolled{background:linear-gradient(135deg,var(--night-2),var(--night))}
body.home main{padding-top:0}          /* the dark hero sits under the header */
.site-head .findjobs{background:none;border:0;cursor:pointer;font:inherit;
  color:var(--on-dark-body);display:inline-flex;align-items:center}
.site-head .findjobs:hover,.site-head nav a:hover{color:#fff}
.caret{font-size:.62em;opacity:.7;margin-left:5px}

/* --- Find Jobs mega ---------------------------------------------------------*/
.mega{position:absolute;top:100%;left:0;right:0;background:var(--paper);
  border-top:1px solid var(--line);box-shadow:0 30px 60px rgba(20,30,60,.18);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:120}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega-in{display:grid;grid-template-columns:256px 1fr;max-width:var(--w);margin:0 auto}
.mega-left{border-right:1px solid var(--line);padding:16px 0;max-height:466px;overflow-y:auto}
.mega-cat{display:block;width:100%;text-align:left;background:none;border:0;
  font-family:var(--body);font-size:.92rem;color:var(--slate);padding:9px 24px;cursor:pointer;transition:.12s}
.mega-cat.active,.mega-cat:hover,.mega-cat:focus-visible{background:var(--fog);color:var(--blue);font-weight:600}
.mega-cat .r{float:right;opacity:.5}
.mega-right{padding:30px 36px;display:flex;max-height:466px;overflow-y:auto}
.mega-panel{display:none;flex:1}
.mega-panel.active{display:grid;grid-template-columns:1fr 268px;gap:36px}
.mega-main{display:flex;flex-direction:column;min-width:0}
.mega-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 26px;align-content:start}
.mega-roles a{color:var(--ink);font-size:.93rem;line-height:1.35}
.mega-roles a:hover{color:var(--blue)}
.mega-all{margin-top:22px;color:var(--blue);font-weight:600;font-size:.92rem}
.mega-cities{border-left:1px solid var(--line);padding-left:32px;display:flex;flex-direction:column}
.mega-h{font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.mega-cities a{color:var(--slate);font-size:.9rem;padding:5px 0;line-height:1.3}
.mega-cities a:hover{color:var(--blue)}

/* --- Hero -------------------------------------------------------------------*/
.mkt-hero{background:
   radial-gradient(1000px 520px at 12% -12%,rgba(62,133,255,.28),transparent 58%),
   radial-gradient(760px 520px at 92% 4%,rgba(0,225,217,.16),transparent 55%),
   linear-gradient(135deg,var(--night-2),var(--night));
  color:#fff;padding:152px 0 104px;text-align:center}
.mkt-hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem);margin:0 auto 1.5rem;max-width:22ch}
.mkt-hero .lede{color:var(--on-dark-body);max-width:60ch;margin:0 auto;font-size:1.16rem}
.mkt-hero .lede b{color:#fff;font-weight:600}
.mkt-search{max-width:660px;margin:42px auto 0;display:flex;background:#fff;
  border-radius:14px;padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.28)}
.mkt-search input{flex:1;border:0;padding:15px 18px;font-size:1rem;font-family:var(--body);outline:none;color:var(--ink)}
.mkt-pop{margin-top:18px;color:var(--on-dark-mute);font-size:.85rem}

/* --- Metrics counter -------------------------------------------------------*/
.metrics{background:linear-gradient(135deg,var(--night-2),var(--night));padding:56px 0}
.metrics .row{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;text-align:center}
.metrics .count{font-family:var(--display);font-weight:700;font-size:clamp(2rem,3.4vw,2.7rem);
  letter-spacing:-.03em;background:linear-gradient(135deg,var(--blue),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.metrics .lbl{color:var(--on-dark-body);font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;margin-top:4px}

/* --- Logo wall -------------------------------------------------------------*/
.logo-wall{background:linear-gradient(180deg,#F4F7FD,var(--paper));padding:52px 0}
.logo-wall .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:30px;align-items:center;justify-items:start;margin-top:26px}
.logo-wall .mark{display:flex;align-items:center;gap:9px;opacity:.5;transition:opacity .15s}
.logo-wall .mark:hover{opacity:1}
.logo-wall .mark span{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:var(--mute)}

/* --- Three-audience hub (soft tint, full-width filled buttons) --------------*/
.aud-hub{background:
   radial-gradient(900px 460px at 85% 12%,rgba(10,92,255,.06),transparent 60%),
   radial-gradient(700px 400px at 4% 92%,rgba(0,225,217,.06),transparent 60%),var(--paper);padding:56px 0}
.aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.aud-card{border-radius:20px;padding:32px;display:flex;flex-direction:column;border:1px solid}
.aud-card .tag{font-family:var(--body);font-weight:700;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase}
.aud-card h3{font-size:1.5rem;margin:.5rem 0}
.aud-card p{color:var(--slate);margin-bottom:14px}
.aud-card ul{list-style:none;margin:0 0 24px;flex:1}
.aud-card li{display:flex;gap:10px;margin:9px 0;color:var(--slate)}
.aud-card li i{font-style:normal;font-weight:700;flex:none}
.aud-card .btn{display:block;width:100%;text-align:center;color:#fff}
.aud-company{background:linear-gradient(180deg,#EAFBFA,#fff);border-color:#BEEDEA}
.aud-company .tag,.aud-company li i{color:var(--cyan-deep)}.aud-company .btn{background:var(--cyan-deep)}
.aud-recruiter{background:linear-gradient(180deg,#FFF2EE,#fff);border-color:#FFD6C9}
.aud-recruiter .tag,.aud-recruiter li i{color:var(--coral)}.aud-recruiter .btn{background:var(--coral)}
.aud-candidate{background:linear-gradient(180deg,#EEF4FF,#fff);border-color:#CBDCFF}
.aud-candidate .tag,.aud-candidate li i{color:var(--blue)}.aud-candidate .btn{background:var(--blue)}

/* --- Contract-staffing strip ----------------------------------------------*/
.offer-strip{margin-top:20px;background:linear-gradient(135deg,var(--night-2),var(--night));
  color:#fff;border-radius:20px;padding:26px 32px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap}
.offer-strip h3{color:#fff;font-size:1.25rem;margin:0 0 4px}
.offer-strip p{color:var(--on-dark-body);margin:0;max-width:62ch;font-size:.95rem}

/* --- Browse by industry ----------------------------------------------------*/
.ind-sec{background:linear-gradient(180deg,#EFF4FC,#F5F8FD);padding:52px 0}
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.ind-grid a{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:block;transition:.15s}
.ind-grid a:hover{box-shadow:0 14px 34px rgba(20,30,60,.10);border-color:#cfd6e6}
.ind-grid a b{font-family:var(--display);font-weight:600;display:block}
.ind-grid a span{color:var(--mute);font-size:.85rem;margin-top:4px;display:block}

/* --- Hiring everywhere chips ------------------------------------------------*/
.city-sec{background:linear-gradient(180deg,#fff,#EEF3FB);padding:56px 0}
.city-chips{display:flex;flex-wrap:wrap;gap:10px}
.city-chips a{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.92rem;color:var(--slate)}
.city-chips a:hover{border-color:var(--blue);color:var(--blue)}

/* --- Footer (5-col) --------------------------------------------------------*/
.site-foot .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px}
.site-foot .foot-grid h4{font-family:var(--body);font-weight:700;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;margin-bottom:14px}
.site-foot .foot-grid a{color:var(--on-dark-mute);font-size:.92rem;display:block;padding:6px 0}
.site-foot .foot-grid a:hover{color:#fff}
.site-foot .foot-tag{color:var(--on-dark-body);font-size:.92rem;margin:16px 0 10px;max-width:30ch}
.site-foot .foot-parent{color:var(--on-dark-mute);font-size:.85rem}

/* --- Responsive ------------------------------------------------------------*/
@media(max-width:980px){.mega{display:none}}
@media(max-width:900px){.ind-grid{grid-template-columns:repeat(2,1fr)}
  .site-foot .foot-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:780px){.aud-grid{grid-template-columns:1fr}}
@media(max-width:700px){.metrics .row{grid-template-columns:repeat(2,1fr);gap:28px 12px}}
@media(max-width:560px){.ind-grid{grid-template-columns:1fr}.mkt-search{flex-direction:column}
  .mkt-search .btn{width:100%}.site-foot .foot-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.site-head,.site-head img,.mega{transition:none}}

/* --- Phase 2 mobile fixes: hide the mega trigger button on small screens
       (the existing .hide-sm rule only targets <a>), and wrap the logo wall. */
@media(max-width:900px){
  .site-head nav .findjobs.hide-sm{display:none}
  .logo-wall .grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:480px){
  .logo-wall .grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================================
   RESPONSIVE CHROME — one template, media-query controlled (no UA detection).
   Desktop nav + footer grid above 900px; mobile hamburger header + 5-button
   bottom tab bar below it. Both chromes ship in every page; only visibility
   changes with width. Switch point is 900px — where the desktop nav links have
   already collapsed and it stops being usable.
   ========================================================================== */
.m-head{position:fixed;top:0;left:0;right:0;z-index:100;
  background:linear-gradient(135deg,var(--night-2),var(--night));box-shadow:0 4px 18px rgba(0,0,0,.28)}
.m-bar{display:flex;align-items:center;justify-content:space-between;height:60px}
.m-bar img{height:32px;width:auto;display:block}
.m-burger{background:none;border:0;width:40px;height:40px;display:flex;flex-direction:column;
  justify-content:center;gap:5px;cursor:pointer;padding:0}
.m-burger span{display:block;height:2px;width:24px;background:#fff;border-radius:2px;transition:.2s}
body.nav-open .m-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .m-burger span:nth-child(2){opacity:0}
body.nav-open .m-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.m-nav{max-height:0;overflow:hidden;transition:max-height .28s ease;
  background:linear-gradient(135deg,var(--night-2),var(--night));border-top:1px solid var(--on-dark-line)}
body.nav-open .m-nav{max-height:85vh;overflow-y:auto}
.m-nav > a,.m-acc > summary{display:block;padding:15px 24px;color:var(--on-dark-body);
  font-size:1.02rem;border-bottom:1px solid var(--on-dark-line);text-decoration:none}
.m-nav > a.btn-primary{margin:16px 24px;padding:14px;text-align:center;color:#fff;border-bottom:0;border-radius:12px}
.m-acc > summary{cursor:pointer;list-style:none;font-weight:600;color:#fff;display:flex;justify-content:space-between;align-items:center}
.m-acc > summary::after{content:'+';font-size:1.3rem;color:var(--cyan-lift)}
.m-acc[open] > summary::after{content:'–'}
.m-acc-body{display:grid;grid-template-columns:1fr 1fr;gap:2px 0;padding:6px 24px 14px;background:rgba(0,0,0,.18)}
.m-acc-body a{color:var(--on-dark-body);font-size:.9rem;padding:8px 0;text-decoration:none}
.m-acc-body a:active{color:#fff}
/* Bottom tab bar — fixed 5-button app-style nav (mobile footer). */
.m-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;
  grid-template-columns:repeat(5,1fr);align-items:center;height:62px;
  background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(20,30,60,.08);padding-bottom:env(safe-area-inset-bottom)}
.m-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--mute);font-size:.66rem;font-weight:600;background:none;border:0;cursor:pointer;
  text-decoration:none;font-family:var(--body);height:100%}
.m-tab svg{width:23px;height:23px}
.m-tab.active{color:var(--blue)}
.m-tab:active{color:var(--blue)}
.m-tab-cta{color:var(--blue)}
.m-tab-cta .fab{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  margin-top:-20px;border-radius:50%;background:var(--blue);color:#fff;
  box-shadow:0 6px 16px rgba(10,92,255,.4);border:3px solid var(--paper)}
.m-tab-cta .fab svg{width:22px;height:22px}

/* --- The switch. Desktop hides the mobile chrome; mobile hides the desktop
       header + footer link grid and makes room for the two fixed bars. ------- */
@media (min-width: 901px){
  .m-head, .m-tabbar { display: none; }
}
@media (max-width: 900px){
  .site-head { display: none; }
  .site-foot .foot-grid { display: none; }
  .site-foot .base { justify-content: center; text-align: center; }
  main, body.home main { padding-top: 60px; }   /* clear the fixed mobile header */
  body { padding-bottom: 64px; }                /* clear the fixed tab bar */
}

/* ============================================================================
   DEVICE VISIBILITY UTILITIES — show/hide by viewport width.
   Boundary: "mobile" = ≤768px (tablet-portrait and below), "desktop" = ≥769px.
   Elements keep their natural display when shown; only hidden (via !important)
   when out of range — so a flex/grid container isn't flattened to block.
     .hide-mobile / .desktop-only  → hidden on mobile, shown on desktop
     .hide-desktop / .mobile-only  → hidden on desktop, shown on mobile
   These compose with the App\Device template switch (body.m) — width utilities
   work in BOTH the desktop and mobile templates.
   ========================================================================== */
@media (max-width: 768px){ .hide-mobile, .desktop-only { display: none !important; } }
@media (min-width: 769px){ .hide-desktop, .mobile-only { display: none !important; } }

/* Auth + account pages sit in the standard .wrap gutter. .page-form narrows it
   to a readable form width (560px of content, the gutters added on top). */
.page-pad{padding-top:40px;padding-bottom:72px}
.page-form{max-width:calc(560px + 2 * var(--gut))}
.page-pad > h1{margin-bottom:.35em}
@media (max-width:900px){.page-pad{padding-top:28px;padding-bottom:56px}}
/* A [hidden] link must stay hidden even where nav rules set display:block. */
.m-nav > a[hidden],.site-head nav a[hidden]{display:none}