/* khulatalent.com. Palette 4.0, "evergreen and coral" (operator, KhulaWeb chat, 2026-10-31, whole site; A370 in
   Recruitment_Support). Evergreen for text, links and panels; coral for the one primary action of a task (white on
   coral 4.9:1). Tokens keep their old names so pricing.css follows. 8 px rhythm, 12 to 16 px corners. */

@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --jade: #12594F; --sage: #A8CBBF; --mint: #E3EFEA; --ivory: #F4F7F2;  /* lifted from #F7F4EC (sand) to a cool paper, operator 2026-11-07 */
  --ink: #1C2B27; --action: #13433C; --action-dark: #0C332D; --slate: #4F5E59; --line: #E1E3DC;
  --white: #FFFFFF; --surface: #FFFFFF;  /* --white is also the text colour on evergreen; surfaces use --surface so dark mode can change them alone */
  --brand: #13433C; --panel: #0F4A42; --panel2: #12594F; --coral: #C2492F; --coral-dark: #A93D26;
  --canvas: #F4F7F2;
  --display: "Manrope", Arial, Helvetica, sans-serif;
  --body: "Inter", Arial, Helvetica, sans-serif;
  --r: 14px; --r-sm: 12px;
  --wrap: 1160px;
  color-scheme: light dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--body);
  font-size: 17px; line-height: 1.6; overflow-x: clip; }
/* The canvas (operator, 2026-11-07: the flat ivory read as beach sand): a quiet signature in the brand's own colours, all CSS,
   fixed behind every page. Sage glow top left, mint wash right, a touch of coral warmth low down, and a hairline grain at 2.5
   percent so the surface has grain without a texture file. Panels, cards and bands keep their own backgrounds on top.
   Lifted a step further (operator, 2026-11-09: still "too flat and plain"; about a fifth to a quarter of the evergreen
   surfaces' lift): dots closer and darker, the glows fuller, two smaller arcs anchored to the top right so a phone screen
   shows the arcs too, a second sage glow low left so the lower half of a long page is not plain. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* the brand arcs, drawn large: three thin sage rings off the top right corner, and two smaller ones a phone can see */
    radial-gradient(circle at 88% 6%, transparent 539px, rgba(168, 203, 191, .55) 540px, rgba(168, 203, 191, .55) 542px, transparent 543px),
    radial-gradient(circle at 88% 6%, transparent 419px, rgba(168, 203, 191, .75) 420px, rgba(168, 203, 191, .75) 423px, transparent 424px),
    radial-gradient(circle at 88% 6%, transparent 299px, rgba(168, 203, 191, .6) 300px, rgba(168, 203, 191, .6) 302px, transparent 303px),
    radial-gradient(circle at 100% 0%, transparent 229px, rgba(168, 203, 191, .6) 230px, rgba(168, 203, 191, .6) 232px, transparent 233px),
    radial-gradient(circle at 100% 0%, transparent 149px, rgba(168, 203, 191, .5) 150px, rgba(168, 203, 191, .5) 152px, transparent 153px),
    /* a fine sage dot grid, the pattern */
    radial-gradient(circle, rgba(18, 89, 79, .3) 1px, transparent 1.5px),
    /* colour: sage glow top left, mint wash right, a second sage glow low left, a touch of coral warmth low down */
    radial-gradient(1100px 700px at 6% -12%, rgba(168, 203, 191, .8), transparent 62%),
    radial-gradient(760px 540px at 102% 18%, rgba(216, 233, 224, 1), transparent 62%),
    radial-gradient(900px 600px at -6% 78%, rgba(168, 203, 191, .42), transparent 62%),
    radial-gradient(900px 620px at 68% 112%, rgba(194, 73, 47, .17), transparent 62%);
  background-size: auto, auto, auto, auto, auto, 20px 20px, auto, auto, auto, auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--action); text-underline-offset: 3px; }
a:hover { color: var(--action-dark); }
:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0 0 16px; letter-spacing: -0.01em; }
h1 { font-size: clamp(36px, 5.2vw, 56px); line-height: 1.08; font-weight: 600; }
h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; font-weight: 600; }
h3 { font-size: 21px; line-height: 1.3; font-weight: 600; }
p { margin: 0 0 16px; }
.muted { color: var(--slate); }
.fine { font-size: 14px; color: var(--slate); margin-top: 16px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--white); padding: 8px 16px; z-index: 10; }
.skip:focus { left: 16px; }

/* Header */
.top { position: sticky; top: 0; z-index: 5; background: rgba(244, 247, 242, 0.92);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.top__inner { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }  /* a 44 px target around the 32 px mark (a11y walk, 2026-11-08) */
.brand img { width: 98px; height: 32px; }
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px; padding: 10px 0;
  border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--jade); color: var(--ink); }
/* Sign in: a small text link to the staff app (D8, 2026-10-04); the Book a demo button stays the one primary action. */
.top__signin { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px; padding: 8px 4px;
  margin-left: -8px; border-bottom: 2px solid transparent; }
.top__signin:hover { border-bottom-color: var(--jade); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  border-radius: 999px; font-family: var(--body); font-weight: 600; font-size: 16px; text-decoration: none;
  white-space: nowrap; transition: background-color .15s ease; }
.btn--primary { background: var(--coral); color: var(--white); }
.btn--primary:hover { background: var(--coral-dark); color: var(--white); }
.btn--lg { min-height: 52px; padding: 0 28px; font-size: 17px; }
.link-arrow { font-weight: 600; text-decoration: none; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.actions--center { justify-content: center; }

.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--action); margin-bottom: 16px; }
.lede { font-size: 19px; color: var(--slate); max-width: 40em; }

/* Arcs motif */
.arcs { position: absolute; right: -160px; top: -200px; width: 800px; height: 800px; pointer-events: none; z-index: 0; }
.arcs circle { fill: none; stroke: var(--sage); stroke-width: 2; opacity: .55; }
.arcs circle + circle { stroke: var(--mint); stroke-width: 28; opacity: .9; }
.arcs--small { width: 560px; height: 560px; right: -140px; top: -180px; }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 80px 0 96px; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }

/* Evidence card illustration */
.evcard, .qcard { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(28, 43, 39, .06), 0 16px 40px -16px rgba(28, 43, 39, .22); padding: 24px; }
.evcard__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.evcard__role { font-family: var(--display); font-weight: 600; font-size: 16px; }
.tag { font-size: 12px; font-weight: 600; color: var(--slate); background: var(--mint); border-radius: 999px; padding: 4px 10px; }
.evlist { list-style: none; margin: 0; padding: 0; }
.ev { padding: 16px 0; border-bottom: 1px solid var(--line); }
.ev__req { font-weight: 600; font-size: 15px; margin: 0 0 8px; }
.ev__quote { margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--jade); background: var(--ivory);
  border-radius: 0 8px 8px 0; font-size: 15px; line-height: 1.5; }
.ev__src, .ev__gapnote { margin: 0; font-size: 13px; color: var(--slate); display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jade); flex: none; }
.ring { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--slate); flex: none; }
.ev--gap .ev__gapnote { color: var(--ink); }
.evcard__foot { display: flex; align-items: center; gap: 16px; padding-top: 16px; font-size: 14px; color: var(--slate); }
.score { font-family: var(--display); color: var(--ink); background: var(--mint); border-radius: var(--r-sm);
  padding: 6px 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.score b { font-size: 20px; }

/* Queue illustration */
.qtable { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.qtable th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--slate);
  font-weight: 600; padding: 8px 8px 8px 0; }
.qtable td { padding: 12px 8px 12px 0; border-top: 1px solid var(--line); }
.qtable .num { font-weight: 600; }
.qcard__note { margin: 16px 0 0; font-size: 14px; color: var(--slate); }

/* Sections */
.section { padding: 88px 0; }
.section--tight { padding-top: 32px; }
.section--mint { background: var(--mint); }
.section__head { max-width: 720px; margin-bottom: 48px; }
.section__head p { color: var(--slate); font-size: 18px; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 32px; }
.section--mint .card { border-color: transparent; }
.card p:last-child { margin-bottom: 0; }
.card--accent { background: var(--ink); border-color: var(--ink); }
.card--accent h3, .card--accent p { color: var(--ivory); }
.card--accent .ico { color: var(--sage); background: rgba(168, 203, 191, .14); }
.ico { width: 48px; height: 48px; padding: 10px; border-radius: var(--r-sm); background: var(--mint); color: var(--action); margin-bottom: 24px; }
.section--mint .ico { background: var(--white); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.split--wide { grid-template-columns: 1.1fr 1fr; align-items: start; }
.split__item h2 { font-size: 30px; }
.split__item p { color: var(--slate); max-width: 34em; }
.sticky { position: sticky; top: 104px; }

.place { display: flex; gap: 32px; align-items: flex-start; max-width: 860px; }
.place p { color: var(--slate); font-size: 18px; }

/* Page heads */
.pagehead { position: relative; overflow: hidden; padding: 80px 0 48px; }
.pagehead .wrap { position: relative; z-index: 1; }
.pagehead--center { text-align: center; padding: 120px 0; }
.pagehead--center .lede { margin: 0 auto; }

/* Steps */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 40px 72px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -4px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--mint); color: var(--action); font-family: var(--display); font-weight: 700; font-size: 18px;
  display: grid; place-items: center; }
.steps li::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: 8px; width: 2px; background: var(--line); }
.steps li:last-child::after { display: none; }
.steps p { color: var(--slate); }

.beliefs { list-style: none; margin: 0; padding: 0; }
.beliefs li { padding: 16px 0; border-top: 1px solid var(--line); }
.beliefs h3 { font-size: 18px; margin-bottom: 4px; }
.beliefs p { margin: 0; color: var(--slate); }

.qa { padding: 32px 0; border-top: 1px solid var(--line); }
.qa:first-child { border-top: 0; padding-top: 0; }
.qa h2 { font-size: 24px; }
.qa p { color: var(--slate); margin: 0; }

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 28px; margin-bottom: 8px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 12px; height: 7px;
  border-left: 2px solid var(--action); border-bottom: 2px solid var(--action); transform: rotate(-45deg); }

/* CTA band */
.band--cta { background: linear-gradient(135deg, var(--panel), var(--panel2)); color: var(--white); padding: 72px 0; }
.band__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.band--cta h2 { color: var(--white); margin-bottom: 8px; }
.band--cta p { margin: 0; color: #E3EFEA; font-size: 18px; }


/* Footer */
.foot { border-top: 1px solid var(--line); padding: 48px 0 24px; font-size: 15px; }
.foot__inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.foot__brand { display: flex; gap: 16px; align-items: center; }
.foot__brand img { width: 40px; height: 40px; }
.foot__brand p { margin: 0; }
.foot__name { font-weight: 600; }
.foot__name a { color: var(--ink); }
.foot__links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; }
.foot__links a { color: var(--ink); text-decoration: none; }
.foot__links a:hover { text-decoration: underline; }
.foot__legal { margin-top: 32px; font-size: 14px; }

/* Tablet */
@media (max-width: 960px) {
  .hero__grid, .split, .split--wide { grid-template-columns: 1fr; gap: 40px; }
  .cards3, .cards2 { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .band__inner { flex-direction: column; align-items: flex-start; }
}

/* Phone */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .top__inner { flex-wrap: wrap; gap: 0 16px; min-height: 0; padding-top: 12px; }
  .top .btn { margin-left: 0; min-height: 40px; padding: 0 16px; font-size: 15px; }
  .top__signin { margin-left: auto; font-size: 15px; padding: 12px 4px; }
  .nav { order: 3; width: 100%; margin: 4px 0 0; gap: 24px; }
  .nav a { font-size: 15px; padding: 8px 0 10px; }
  .hero { padding: 48px 0 64px; }
  .pagehead { padding: 48px 0 32px; }
  .section { padding: 64px 0; }
  .section--tight { padding-top: 16px; }
  .card { padding: 24px; }
  .evcard, .qcard { padding: 16px; }
  .place { flex-direction: column; gap: 16px; }
  .steps li { padding-left: 60px; }
  .arcs { width: 520px; height: 520px; right: -260px; top: -160px; }
  .lede { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Home: light hero and the four-step journey (one graphic, SVG and CSS) ---------- */
.hero--light { padding: 72px 0 56px; }
.hero__solo { position: relative; z-index: 1; max-width: 46rem; }
.hero__solo h1 { font-size: clamp(34px, 5vw, 58px); text-wrap: balance; }

.journey { padding-top: 40px; }
.journey .section__head p { color: var(--ink); font-weight: 500; }
.journey__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.journey__steps::before { content: ""; position: absolute; left: 17%; right: 17%; top: 96px; height: 2px; background: var(--line); z-index: 0; }
.step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.step__art { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 10px 10px; }
.jart { display: block; width: 100%; height: auto; }
.step__note { margin: 6px 4px 0; font-size: 12px; color: var(--slate); text-align: right; }
.step__text { display: grid; grid-template-columns: 32px 1fr; gap: 2px 12px; align-items: start; }
.step__n { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mint); color: var(--action); font: 700 15px/1 var(--display); }
.step__text h3 { font-size: 18px; margin: 4px 0 4px; }
.step__text p { margin: 0; color: var(--slate); font-size: 15.5px; }

/* the drawings: brand palette only */
.j-dev { fill: #FFFFFF; stroke: #1C2B27; stroke-width: 2; }
.j-screen { fill: #F4F7F2; }
.j-screen--card { fill: #FFFFFF; stroke: #E1E3DC; stroke-width: 1.5; }
.j-line { fill: #E1E3DC; } .j-line--dark { fill: #1C2B27; } .j-line--soft { fill: #E3EFEA; }
.j-field { fill: #FFFFFF; stroke: #E1E3DC; stroke-width: 1.2; } .j-field--doc { fill: #E3EFEA; stroke: #A8CBBF; }
.j-stroke-soft { stroke: #A8CBBF; stroke-width: 2; stroke-linecap: round; }
.j-btn { fill: #C2492F; } .j-btn-text { fill: #FFFFFF; font: 600 9.5px/1 "Inter", Arial, sans-serif; }
.j-jade, .j-jadefill { fill: #12594F; } .j-mint { fill: #E3EFEA; }
.j-link { fill: none; stroke: #12594F; stroke-width: 1.6; stroke-dasharray: 3 3; }
.j-cursor-shape { fill: #1C2B27; stroke: #FFFFFF; stroke-width: 1.2; stroke-linejoin: round; }
.j-cursor { transform: translate(187px, 106px); }
.j-days rect { fill: #E3EFEA; }
.j-mark { fill: none; stroke: #13433C; stroke-width: 2.5; }
.j-chip { fill: #E3EFEA; stroke: #A8CBBF; stroke-width: 1.2; } .j-chip-text { fill: #1C2B27; font: 600 12px/1 "Inter", Arial, sans-serif; }
.j-dot { fill: #13433C; } .j-subject { fill: #1C2B27; font: 700 13px/1 "Inter", Arial, sans-serif; }
.j-sent { fill: #A8CBBF; }

/* arrival (only when site.js runs and motion is allowed) */
.js-anim .step { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease, ease-out), transform 600ms ease-out; }
.js-anim .step.is-in { opacity: 1; transform: none; }
.js-anim .step[data-step="2"] { transition-delay: 120ms; } .js-anim .step[data-step="3"] { transition-delay: 240ms; }
.js-anim .j-cursor { transform: translate(206px, 150px); transition: transform 1100ms cubic-bezier(.25, .8, .3, 1) 700ms; }
.js-anim .is-in .j-cursor { transform: translate(187px, 106px); }
.js-anim .j-press { transform-box: fill-box; transform-origin: center; transition: transform 160ms ease-out 1750ms; }
.js-anim .step[data-step="2"].is-in .j-press { transform: scale(.96); }
.js-anim .step[data-step="1"] .j-press { transition-delay: 800ms; }
.js-anim .step[data-step="1"].is-in .j-press { transform: scale(.96); }
.js-anim .j-mark { transform-box: fill-box; transform-origin: center; transform: scale(.2); opacity: 0; transition: transform 500ms ease-out 700ms, opacity 500ms ease-out 700ms; }
.js-anim .is-in .j-mark { transform: none; opacity: 1; }
.js-anim .j-invite, .js-anim .j-new { opacity: 0; transform: translateY(8px); transition: opacity 500ms ease-out 1000ms, transform 500ms ease-out 1000ms; }
.js-anim .is-in .j-invite, .js-anim .is-in .j-new { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .journey__steps { grid-template-columns: 1fr 1fr; }
  .journey__steps::before { display: none; }
}
@media (max-width: 640px) {
  .hero--light { padding: 44px 0 32px; }
  /* phones: one vertical sequence, a thin line joining the steps */
  .journey__steps { grid-template-columns: 1fr; gap: 28px; }
  .step { padding-left: 0; }
  .step:not(:last-child)::after { content: ""; position: absolute; left: 15px; bottom: -24px; width: 2px; height: 20px; background: var(--line); }
  .step__art { max-width: 420px; }
}

/* ---------- Home hero scene: applicant and recruiter views, alternating (operator, 2026-09-28) ----------
   One SVG, two labelled views that slide and cross-fade in turn over a 20 s loop: the applicant
   applies; the recruiter reviews and moves the application to interview; the applicant gets the
   invitation; back to the recruiter's list, which now shows "Interview invited". No offer flow
   (off and counsel-gated; REGISTER D23, 2026-09-30). The resting state below is the final frame:
   the recruiter's list with "Interview invited".
   The loop runs only when motion is allowed; site.js adds .is-paused off-screen or when hidden. */
.hero__grid--scene { grid-template-columns: 1fr 1.05fr; gap: 48px; }
.hs { margin: 0; }
.hs__svg { display: block; width: 100%; height: auto; max-width: 520px; margin-left: auto; }
.hs__note { margin: 8px 0 0; font-size: 12px; color: var(--slate); text-align: right; max-width: 520px; margin-left: auto; }
.j-dev--panel { stroke: #E1E3DC; stroke-width: 1.5; }
.j-tag--a { fill: #E3EFEA; stroke: #A8CBBF; stroke-width: 1.2; } .j-tag--r { fill: #13433C; }
.j-tag-text { fill: #1C2B27; font: 700 11px/1 "Inter", Arial, sans-serif; letter-spacing: .02em; } .j-tag-text--r { fill: #FFFFFF; }
.j-label { fill: #1C2B27; font: 700 13px/1 "Manrope", "Inter", Arial, sans-serif; }
.j-name { fill: #1C2B27; font: 700 12px/1 "Inter", Arial, sans-serif; }
.j-small { fill: #1C2B27; font: 500 10.5px/1 "Inter", Arial, sans-serif; }
.j-btn-text--lg { font-size: 12px; } .j-chip-text--sm { font-size: 10.5px; }
.j-typed { fill: #7A8F88; }
.j-row { fill: #FFFFFF; stroke: #E1E3DC; stroke-width: 1.2; } .j-row--new { stroke: #12594F; }
.j-card { stroke: #A8CBBF; stroke-width: 1.2; }
.j-avatar { fill: #E1E3DC; } .j-avatar--new { fill: #A8CBBF; }
.j-evid { fill: #FFFFFF; stroke: #A8CBBF; stroke-width: 1.2; }
.j-tick { fill: none; stroke: #13433C; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.j-ripple { fill: none; stroke: #12594F; stroke-width: 2; opacity: 0; }
.j-cal { fill: #FFFFFF; stroke: #12594F; stroke-width: 1.4; }
.a-type1, .a-type2, .a-apply, .a-tap1, .r-move { transform-box: fill-box; }
.a-type1, .a-type2 { transform-origin: 0 50%; }
.a-apply, .a-tap1, .r-move { transform-origin: 50% 50%; }
/* the final frame, shown still under reduced motion: the recruiter's list with "Interview invited" */
.hv-a { opacity: 0; }
.a-inbox, .r-move, .r-cursor { opacity: 0; }

/* ---------- Home: What stays human, with the one photograph ---------- */
.human__grid { display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: center; }
.human__img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.foot__note { margin-bottom: 6px; }
.human__lead { font-size: 19px; font-weight: 600; color: var(--ink); }
/* Home: five equal-weight cards from the existing .card, .ico and .ticks styles. Only the grid is new: a
   two-column variant of .cards3; the fifth (odd) card spans the full width. No card is accented. */
.cards2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cards2 > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cards2 .ticks { max-width: 70ch; }
/* The odd fifth card spans the row; on computers its short bullets read as three columns under the heading, so the wide
   card is a deliberate closing row, not an orphan with an empty right half (phone walk follow-up, 2026-11-08). */
@media (min-width: 961px) {
  .cards2 > .card:last-child:nth-child(odd) .ticks { max-width: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 32px; }
  .cards2 > .card:last-child:nth-child(odd) .ticks li { margin-bottom: 0; }
}
.cards2 .ticks li strong { color: var(--ink); font-weight: 600; }
.cards2 h3 { margin-bottom: 14px; }
.today .section__head { margin-bottom: 40px; }
/* The six site photographs (operator brief 2026-10-31, images 2026-11-08; fictional people, decorative): the hiring team beside the
   feature heading, the home-office laptop under the job seekers' actions, and a photograph band under the heads of How it works,
   For job seekers and Book a demo. Wides crop to a 21:9 band on computers and 16:9 on phones; the 4:3 band crops to 2:1. */
.today__head { display: grid; grid-template-columns: 1fr 480px; gap: 40px; align-items: center; max-width: none; }
.today__head h2 { margin: 0; }
.today__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
.seekers__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); margin-top: 28px; }
.section--band { padding: 0 0 8px; }
.photo-band { margin: 0; }
.photo-band__img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 40%; border-radius: var(--r);
  box-shadow: 0 24px 48px -32px rgba(12, 51, 45, .5); }
.photo-band--43 .photo-band__img { aspect-ratio: 2 / 1; object-position: center 45%; }
@media (max-width: 960px) {
  .today__head { grid-template-columns: 1fr; gap: 20px; }
  .seekers__img { margin-top: 20px; aspect-ratio: 16 / 10; }
}
@media (max-width: 700px) {
  .photo-band__img, .photo-band--43 .photo-band__img { aspect-ratio: 16 / 9; }
  .section--band { padding: 0 0 4px; }
}
/* the base rule above comes after the tablet breakpoint, so single column is restated here */
@media (max-width: 960px) {
  .cards2 { grid-template-columns: 1fr; }
  .cards2 > .card:last-child:nth-child(odd) { grid-column: auto; }
}

@media (max-width: 960px) {
  .hero__grid--scene { grid-template-columns: 1fr; gap: 28px; }
  .hs__svg, .hs__note { margin-left: 0; }
  .human__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* generated by tools/genhero.py from one timeline (seconds in a 20 s loop); edit it there */
@media (prefers-reduced-motion: no-preference) {
  .hv, .hk { animation-duration: 20s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
  .hs.is-paused .hv, .hs.is-paused .hk { animation-play-state: paused; }
  .hv-a { animation-name: hv-a; } .hv-r { animation-name: hv-r; } .a-form { animation-name: a-form; } .a-inbox { animation-name: a-inbox; } .a-type1 { animation-name: a-type1; } .a-type2 { animation-name: a-type2; } .a-doc { animation-name: a-doc; } .a-apply { animation-name: a-apply; } .a-tap1 { animation-name: a-tap1; } .a-inv { animation-name: a-inv; } .r-rows { animation-name: r-rows; } .r-card { animation-name: r-card; } .r-ev1 { animation-name: r-ev1; } .r-ev2 { animation-name: r-ev2; } .r-move { animation-name: r-move; } .r-booked { animation-name: r-booked; } .r-cursor { animation-name: r-cursor; }
}
@keyframes hv-a { 0% { opacity: 0; transform: translateX(14px); } 2.25% { opacity: 1; transform: translateX(0px); } 22% { opacity: 1; transform: translateX(0px); } 24.25% { opacity: 0; transform: translateX(-14px); } 52.25% { opacity: 0; transform: translateX(14px); } 54.5% { opacity: 1; transform: translateX(0px); } 69% { opacity: 1; transform: translateX(0px); } 71.25% { opacity: 0; transform: translateX(-14px); } 100% { opacity: 0; transform: translateX(-14px); } }
@keyframes hv-r { 0% { opacity: 0; transform: translateX(14px); } 24.25% { opacity: 0; transform: translateX(14px); } 26.5% { opacity: 1; transform: translateX(0px); } 50% { opacity: 1; transform: translateX(0px); } 52.25% { opacity: 0; transform: translateX(-14px); } 71.25% { opacity: 0; transform: translateX(14px); } 73.5% { opacity: 1; transform: translateX(0px); } 97.25% { opacity: 1; transform: translateX(0px); } 99.5% { opacity: 0; transform: translateX(-14px); } 100% { opacity: 0; transform: translateX(14px); } }
@keyframes a-form { 0% { opacity: 1; } 25% { opacity: 1; } 25.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes a-inbox { 0% { opacity: 0; } 25% { opacity: 0; } 25.5% { opacity: 1; } 71.5% { opacity: 1; } 72% { opacity: 0; } 100% { opacity: 0; } }
@keyframes a-type1 { 0% { transform: scaleX(0); } 1.5% { transform: scaleX(0); } 5.5% { transform: scaleX(1); } 25% { transform: scaleX(1); } 25.5% { transform: scaleX(0); } 100% { transform: scaleX(0); } }
@keyframes a-type2 { 0% { transform: scaleX(0); } 5.5% { transform: scaleX(0); } 9.5% { transform: scaleX(1); } 25% { transform: scaleX(1); } 25.5% { transform: scaleX(0); } 100% { transform: scaleX(0); } }
@keyframes a-doc { 0% { opacity: 0; transform: translateY(6px); } 9.5% { opacity: 0; transform: translateY(6px); } 12.5% { opacity: 1; transform: translateY(0px); } 25% { opacity: 1; transform: translateY(0px); } 25.5% { opacity: 0; transform: translateY(6px); } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes a-apply { 0% { transform: scale(1); } 15% { transform: scale(1); } 15.75% { transform: scale(0.93); } 17% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes a-tap1 { 0% { opacity: 0; transform: scale(0.4); } 15% { opacity: 0; transform: scale(0.4); } 15.75% { opacity: 0.9; transform: scale(0.7); } 19.5% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes a-inv { 0% { opacity: 0; transform: translateY(-16px); } 54.5% { opacity: 0; transform: translateY(-16px); } 57.5% { opacity: 1; transform: translateY(0px); } 71.5% { opacity: 1; transform: translateY(0px); } 72% { opacity: 0; transform: translateY(-16px); } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes r-rows { 0% { transform: translateY(-54px); } 26% { transform: translateY(-54px); } 29.5% { transform: translateY(0px); } 99.5% { transform: translateY(0px); } 100% { transform: translateY(-54px); } }
@keyframes r-card { 0% { opacity: 0; transform: translateX(-24px); } 26% { opacity: 0; transform: translateX(-24px); } 29.5% { opacity: 1; transform: translateX(0px); } 99.5% { opacity: 1; transform: translateX(0px); } 100% { opacity: 0; transform: translateX(-24px); } }
@keyframes r-ev1 { 0% { opacity: 0; } 34.5% { opacity: 0; } 36.5% { opacity: 1; } 99.5% { opacity: 1; } 100% { opacity: 0; } }
@keyframes r-ev2 { 0% { opacity: 0; } 37.5% { opacity: 0; } 39.5% { opacity: 1; } 99.5% { opacity: 1; } 100% { opacity: 0; } }
@keyframes r-move { 0% { opacity: 1; transform: scale(1); } 43.75% { opacity: 1; transform: scale(1); } 44.5% { opacity: 1; transform: scale(0.93); } 45.25% { opacity: 1; transform: scale(1); } 46.5% { opacity: 0; transform: scale(1); } 99.5% { opacity: 0; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes r-booked { 0% { opacity: 0; } 45.25% { opacity: 0; } 46.5% { opacity: 1; } 99.5% { opacity: 1; } 100% { opacity: 0; } }
@keyframes r-cursor { 0% { transform: translate(380px, 270px) scale(1); opacity: 0; } 29.5% { transform: translate(380px, 270px) scale(1); opacity: 0; } 31.5% { transform: translate(330px, 220px) scale(1); opacity: 1; } 34.5% { transform: translate(200px, 126px) scale(1); opacity: 1; } 40% { transform: translate(200px, 126px) scale(1); opacity: 1; } 43% { transform: translate(357px, 128px) scale(1); opacity: 1; } 43.75% { transform: translate(357px, 128px) scale(1); opacity: 1; } 44.5% { transform: translate(357px, 128px) scale(0.86); opacity: 1; } 45.25% { transform: translate(357px, 128px) scale(1); opacity: 1; } 50% { transform: translate(357px, 128px) scale(1); opacity: 1; } 53% { transform: translate(357px, 128px) scale(1); opacity: 0; } 100% { transform: translate(380px, 270px) scale(1); opacity: 0; } }

/* ---------- Level-up, 2026-10-31: two audiences, one site (operator, KhulaWeb chat) ----------
   Employers stay the business priority and the home page's first voice; job seekers get a clear door
   (For job seekers, Khula Jobs). Evergreen and coral, the people photographs, CSS motion that respects
   prefers-reduced-motion. */
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.eyebrow--light { color: var(--sage); }
.lede--light { color: var(--mint); }
.btn--ghost-light { background: transparent; color: var(--white); border: 1.5px solid rgba(255, 255, 255, .55); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .12); color: var(--white); border-color: var(--white); }
.btn--outline { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
.btn--outline:hover { background: var(--brand); color: var(--white); }
.btn--brand { background: var(--brand); color: var(--white); }
.btn--brand:hover { background: var(--panel2); color: var(--white); }
.btn--lg.btn--outline, .btn--lg.btn--ghost-light { padding: 0 26px; }

/* Header: the job seeker door sits beside the employer one */
.nav { gap: 22px; align-items: center; }
.nav a.nav__jobs { border: 1.5px solid var(--brand); border-radius: 999px; padding: 8px 16px; font-weight: 600; color: var(--brand);
  transition: background-color .15s ease, color .15s ease; }
.nav a.nav__jobs::after { content: " \2197"; font-weight: 500; }
.nav a.nav__jobs:hover { background: var(--brand); color: var(--white); border-color: var(--brand); }
.top { background: rgba(244, 247, 242, 0.9); }

/* Footer: evergreen */
.foot { background: var(--brand); color: var(--mint); border-top: 0; padding: 56px 0 28px; }
.foot a { color: var(--white); }
.foot .muted, .foot__legal .muted { color: #B9D3CA; }
.foot__name { color: var(--white); font-family: var(--display); font-size: 17px; max-width: 26em; }
.foot__brand { align-items: flex-start; }
.foot__brand img { width: 98px; height: 32px; }
.foot__links a { color: var(--white); }
.foot__legal { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 20px; }

/* Portrait faces: small circles, overlapping */
.faces { display: inline-flex; flex: none; }
.faces img { width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid var(--white); object-fit: cover; background: var(--mint); }
.faces img + img { margin-left: -12px; }

/* Doors: the two ways in, side by side */
.doors { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; margin-top: 22px; margin-bottom: 22px; }
.door { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 18px; background: var(--white);
  border: 1px solid var(--line); text-decoration: none; color: var(--ink);
  box-shadow: 0 1px 2px rgba(28, 43, 39, .06), 0 18px 40px -18px rgba(15, 74, 66, .45);
  transition: transform .18s ease, box-shadow .18s ease; }
.door__alts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-top: 8px; }
.door__alts a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.door__alts a.door__pill { padding: 0 16px; border: 1.5px solid var(--brand); border-radius: 999px; text-decoration: none; }
.door__alts a:hover { color: var(--ink); }
.door__text { flex: 1; min-width: 0; }
.door__k { display: block; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--coral); margin-bottom: 2px; }
.door--seek .door__k { color: var(--panel2); }
.door__t { display: block; font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.25; }
.door__s { display: block; color: var(--slate); font-size: 15px; line-height: 1.4; margin-top: 3px; }
.doors + .section { padding-top: 80px; }
.door__go { text-decoration: none; flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 600; font-size: 16px; white-space: nowrap; }
.door--emp .door__go { background: var(--coral); color: var(--white); }
.door--seek .door__go { background: var(--brand); color: var(--white); }
.door--seek .door__go::after { content: " \2197"; margin-left: 4px; font-weight: 500; }
.door--emp .door__go::after { content: " \2192"; margin-left: 6px; }

/* Hero B: the photograph leads (the green wall on the left carries the words) */
.hero-photo { position: relative; overflow: hidden; background: var(--panel); color: var(--white); }
/* the photograph sits on the right and melts into the evergreen panel, so the words always stand on solid colour (measured, not guessed) */
.hero-photo__img { position: absolute; top: 0; right: 0; bottom: 0; width: 80%; height: 100%; object-fit: cover; object-position: 50% 40%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
.hero-photo__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 74, 66, .4) 0%, rgba(15, 74, 66, 0) 50%); }
.hero-photo__inner { position: relative; z-index: 1; padding-top: 104px; padding-bottom: 132px; }
.hero-photo__copy { max-width: 33rem; }
.hero-photo .eyebrow--light { color: var(--mint); }
.hero-photo__copy h1 { font-size: clamp(36px, 4.6vw, 58px); color: var(--white); text-wrap: balance; }
.hero-photo__copy .lede { font-size: 19px; }

/* Job seekers band */
.seekers { background: var(--mint); }
.seekers__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.fam { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fam li { background: var(--white); border-radius: 16px; padding: 18px 12px 16px; text-align: center; border: 1px solid var(--line);
  font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.25; }
.fam img { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 10px; object-fit: cover; border: 3px solid var(--mint); }

/* For job seekers page */
.pagehead--dark { background: linear-gradient(135deg, var(--panel), var(--panel2)); color: var(--white); padding: 88px 0 72px; }
.pagehead--dark h1 { color: var(--white); max-width: 16em; text-wrap: balance; }
.pagehead--dark .lede { color: var(--mint); }
.pagehead--dark .arcs circle { stroke: rgba(255, 255, 255, .2); }
.pagehead--dark .arcs circle + circle { stroke: rgba(255, 255, 255, .06); }
.qa--lead, .qa--lead:first-child { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 32px; margin-bottom: 8px; }
.qa--lead + .qa { border-top: 0; }

/* Motion: only when allowed */
@keyframes kz { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-photo__img { animation: kz 16s ease-out both; }
  .door { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .door--seek { animation-delay: .12s; }
  .hero-photo__copy > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-photo__copy > :nth-child(2) { animation-delay: .08s; }
  .hero-photo__copy > :nth-child(3) { animation-delay: .16s; }
  .hero-photo__copy > :nth-child(4) { animation-delay: .24s; }
  .faces img { animation: rise .6s ease-out both; }
  .faces img:nth-child(2) { animation-delay: .1s; } .faces img:nth-child(3) { animation-delay: .2s; }
  .faces img:nth-child(4) { animation-delay: .3s; } .faces img:nth-child(5) { animation-delay: .4s; }
}

@media (max-width: 960px) {
  .doors { grid-template-columns: 1fr; margin-top: 16px; margin-bottom: 16px; }
  .seekers__grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .nav { gap: 0 12px; flex-wrap: wrap; }
  .nav a { font-size: 13px; white-space: nowrap; padding: 11px 0; }  /* without the script (the 404) the links stay visible: 44 px rows */
  .nav a.nav__jobs { padding: 10px 12px; }
  .nav a.nav__jobs::after { content: ""; }
  .door { padding: 18px; flex-wrap: wrap; }
  .door__t { font-size: 18px; }
  .door__go { width: 100%; justify-content: center; }
  .door--seek .faces { display: none; }
  .door__alts { gap: 0 14px; }
  .fam { grid-template-columns: repeat(2, 1fr); }
  .hero-photo__copy .lede { font-size: 17px; }
  .pagehead--dark { padding: 52px 0 44px; }
  .qa--lead, .qa--lead:first-child { padding: 22px 20px; }
}

/* The faces row on the job seekers page (no inline style: the CSP refuses it) */
.faces-row { margin: 28px 0 0; }

/* Proof band: what employers get, in sentences the site already carries (claims C1 to C7, D4) beside the animated scene */
.proof { background: linear-gradient(135deg, var(--panel), var(--panel2)); color: var(--white); position: relative; overflow: hidden; }
.proof__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.proof h2 { color: var(--white); max-width: 14em; text-wrap: balance; }
.proof__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; }
.proof__list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.proof__n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .28); font: 700 18px/1 var(--display); color: var(--white); }
.proof__list h3 { color: var(--white); font-size: 19px; margin: 2px 0 2px; }
.proof__list p { margin: 0; color: var(--mint); font-size: 16px; }
.proof .hs__note { color: #B9D3CA; }

/* Reveal as it scrolls into view (site.js adds .js-anim only when motion is allowed; without it everything simply shows) */
.js-anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease-out, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js-anim .reveal.is-in { opacity: 1; transform: none; }
.js-anim .reveal.d1 { transition-delay: .08s; } .js-anim .reveal.d2 { transition-delay: .16s; } .js-anim .reveal.d3 { transition-delay: .24s; }
.top { transition: box-shadow .2s ease; }
.top.is-scrolled { box-shadow: 0 10px 26px -18px rgba(15, 74, 66, .55); }

/* Below 1200 px the photograph goes on top and the words below it on solid evergreen. Measured: over the photograph the text
   falls under 4.5:1 between about 1121 and 1160 px, so the overlay is used from 1200 px only (8.6 or better there). */
@media (max-width: 1199px) {
  .hero-photo__img { position: relative; width: 100%; height: auto; aspect-ratio: 11 / 5; object-position: 60% 28%; -webkit-mask-image: none; mask-image: none; }
  .hero-photo__shade { display: none; }
  .hero-photo__inner { padding-top: 40px; padding-bottom: 104px; }
}
@media (max-width: 640px) {
  .hero-photo__img { aspect-ratio: 4 / 3; }
  .hero-photo__inner { padding-top: 28px; padding-bottom: 88px; }
}

/* Header on tablets: the brand, Sign in and Book a demo on the first row, the nav on its own row (two more items than before) */
.nav a { white-space: nowrap; }
@media (max-width: 960px) {
  .top__inner { flex-wrap: wrap; gap: 0 16px; min-height: 0; padding-top: 12px; }
  .top__signin { margin-left: auto; }
  .nav { order: 3; width: 100%; margin: 4px 0 0; gap: 6px 22px; }
}

/* One column on tablets and phones. This comes after the base .proof__grid rule on purpose: an earlier media rule lost to it on order. */
@media (max-width: 960px) {
  .proof__grid { grid-template-columns: 1fr; gap: 36px; }
  .proof .hs__svg, .proof .hs__note { margin-left: 0; }
}

/* The For job seekers page has no Sign in: Book a demo then sits at the right edge of the first row on tablets and phones */
@media (max-width: 960px) {
  .top .btn { margin-left: auto; }
  .top__signin + .btn { margin-left: 0; }
}

.pagehead--dark .link-arrow { color: var(--white); }

/* The two homepage entrances (operator direction, 2026-11-07): employer panel first, both inside the first phone
   screen, the header and footer unchanged. Evergreen panel for employers, mint for job seekers; one primary action
   each, quiet secondary links, and one product glimpse per panel in the product's own words. */
.first-screen { display: grid; grid-template-columns: 1.04fr 1fr; gap: 16px; padding-block: 24px 32px; }
.entry-panel { position: relative; overflow: hidden; min-width: 0; border-radius: 20px; padding: clamp(28px, 3.2vw, 48px);
  display: flex; flex-direction: column; align-items: flex-start; }
.entry-panel > :not(.arcs) { position: relative; z-index: 1; }
.entry-employer { color: var(--white); background: linear-gradient(160deg, var(--panel2) 0%, var(--brand) 58%, var(--action-dark) 100%);
  box-shadow: 0 24px 48px -28px rgba(12, 51, 45, .55); }
.entry-candidate { color: var(--brand); border: 1px solid #CFE2D8;
  background: linear-gradient(160deg, #EDF5F0 0%, var(--mint) 52%, #D6E8DF 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 24px 48px -30px rgba(18, 89, 79, .38); }
.entry-candidate .arcs { right: -240px; top: -300px; }
.entry-candidate .arcs circle { opacity: .8; }
.entry-candidate .arcs circle + circle { opacity: 1; stroke: #D9EBE2; }
.entry-label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 20px; }
.entry-employer .entry-label { color: var(--sage); }
.entry-candidate .entry-label { color: var(--jade); }
.entry-panel h1, .entry-panel h2 { color: inherit; font-family: var(--display); font-weight: 600; font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1.06; letter-spacing: -.025em; max-width: 14ch; margin: 0 0 14px; }
.entry-copy { max-width: 42ch; font-size: 17px; line-height: 1.5; margin: 0 0 22px; }
.entry-employer .entry-copy { color: rgba(255, 255, 255, .86); }
.entry-candidate .entry-copy { color: var(--slate); }
.entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.entry-actions a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600;
  text-decoration: none; border-bottom: 1.5px solid transparent; }
.entry-actions a:hover { border-bottom-color: currentColor; }
.entry-employer .entry-actions a { color: var(--white); }
.entry-candidate .entry-actions a { color: var(--action); }
.entry-actions .entry-button { min-height: 50px; padding: 0 24px; border-radius: 999px; font-size: 16px; margin-right: 6px;
  transition: background-color .15s ease, transform .15s ease; }
.entry-actions .entry-button:hover { border-bottom-color: transparent; transform: translateY(-1px); }
.entry-employer .entry-actions .entry-button { background: var(--coral); color: var(--white); }
.entry-employer .entry-actions .entry-button:hover { background: var(--coral-dark); color: var(--white); }
.entry-candidate .entry-actions .entry-button { background: var(--brand); color: var(--white); }
.entry-candidate .entry-actions .entry-button:hover { background: var(--action-dark); color: var(--white); }
.entry-employer a:focus-visible { outline-color: var(--white); }

/* Employer glimpse: one application review as the product shows it (mainK 0183: each document carries a person's
   decision, Accepted / Not acceptable / Not yet checked, then Change stage), marked as an example with sample data. */
.glimpse { width: 100%; margin-top: auto; padding-top: 28px; }
.review { border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); }
.review__head { padding: 14px 18px 10px; display: grid; gap: 4px; }
.review__head small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); }
.review__head strong { font-family: var(--display); font-size: 18px; font-weight: 600; }
.doc-rows { list-style: none; margin: 0; padding: 0 18px; border-top: 1px solid rgba(255, 255, 255, .12); }
.doc-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .9); }
.doc-rows li:last-child { border-bottom: 0; }
.doc-rows em { font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.doc-rows em.ok { background: rgba(168, 203, 191, .22); color: #DCEFE7; }
.doc-rows em.pending { background: rgba(194, 73, 47, .26); color: #F6CFC5; }
.review__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px;
  background: rgba(0, 0, 0, .16); font-size: 14px; color: rgba(255, 255, 255, .9); }
.review__foot b { font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--white); color: var(--brand); }

/* The first-screen panels rise by movement only (speed pass 2026-11-08): a fade from opacity 0 held the first paint back on
   slow phones by about half a second; the lift reads the same and the words are visible from the first frame. */
@keyframes rise-move { from { transform: translateY(18px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .entry-panel { animation: rise-move .7s cubic-bezier(.2, .7, .2, 1) both; }
  .entry-candidate { animation-delay: .12s; }
}

/* Job seeker glimpse: the photograph with a saved-job tile, marked as an example. */
.entry-scene { position: relative; width: 100%; margin: 26px 0 0; border-radius: 14px; overflow: hidden; }
.entry-photo { width: 100%; height: 200px; object-fit: cover; object-position: 72% 38%; display: block; }
.entry-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(19, 67, 60, 0) 45%, rgba(19, 67, 60, .45) 100%); }
.entry-scene figcaption { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: grid; gap: 2px; background: var(--white);
  color: var(--ink); border-radius: 12px; padding: 10px 14px; font-size: 13px; box-shadow: 0 10px 24px -14px rgba(28, 43, 39, .5); }
.entry-scene figcaption small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.entry-scene figcaption strong { font-family: var(--display); font-size: 15px; font-weight: 600; }
.entry-scene figcaption span { color: var(--jade); font-weight: 600; }

@media (max-width: 960px) {
  .first-screen { grid-template-columns: 1fr; }
  .entry-panel h1, .entry-panel h2 { max-width: 18ch; }
}
@media (max-width: 700px) {
  .first-screen { padding: 12px 16px 20px; gap: 10px; }
  .entry-panel { padding: 20px 20px 22px; border-radius: 16px; }
  .entry-label { margin-bottom: 8px; }
  .entry-panel h1, .entry-panel h2 { font-size: clamp(30px, 8.4vw, 38px); margin-bottom: 8px; max-width: none; }
  .entry-copy { font-size: 15px; margin-bottom: 12px; }
  .entry-actions { gap: 6px 16px; }
  .entry-actions .entry-button { min-height: 46px; }
  .glimpse { display: none; }
  .entry-scene { margin-top: 14px; }
  .entry-photo { height: 120px; }
}

/* Phone header (operator, 2026-11-07, "compact header"): one row, logo, Book a demo and a Menu button; the nav links and the
   employer sign in open under it as full-width rows. Only when the script has run (html.js-nav); otherwise the links stay
   visible as before. */
.nav-toggle { display: none; }
/* Speed pass 2026-11-08: the compact header is the DEFAULT under 700 px, so the page does not reflow when the script arrives
   (the old html.js-nav gate shifted the whole page once site.js ran: CLS 0.17 on a slow phone). Without the script the links
   come back through nojs.css (<noscript> on every page, a plain link on the 404, which carries no script by his rule). */
@media (max-width: 700px) {
  .top__inner { flex-wrap: wrap; gap: 8px 12px; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  /* 44 px targets (pack rule; the journey walk of 2026-11-09 measured both at 40 on every page at 390 and 360) */
  .top .btn { margin-left: auto; min-height: 44px; padding: 0 16px; font-size: 15px; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 64px;
    padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--brand); background: transparent; color: var(--brand);
    font: 600 15px var(--body); cursor: pointer; }
  .top.nav-open .nav-toggle { background: var(--brand); color: var(--white); }
  .nav, .top__signin { display: none; }
  .top.nav-open .nav { display: flex; flex-direction: column; align-items: stretch; flex-basis: 100%; width: 100%; order: 10;
    gap: 0; margin: 4px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
  .top.nav-open .nav a { display: block; width: 100%; text-align: left; font-size: 17px; padding: 12px 0;
    border-bottom: 1px solid var(--line); }
  .top.nav-open .nav a.nav__jobs { display: inline-flex; width: auto; align-self: flex-start; margin: 10px 0 6px; padding: 8px 16px;
    border-bottom: 1.5px solid var(--brand); }
  .top.nav-open .top__signin { display: flex; flex-basis: 100%; order: 11; align-items: center; min-height: 48px;
    margin: 0 0 4px; padding: 0; font-size: 17px; }
  /* no blur behind the phone header: backdrop-filter is paint work on every scroll frame on a phone */
  .top { backdrop-filter: none; background: rgba(244, 247, 242, .98); }
}
/* Dark mode (operator, KhulaWeb chat, 2026-11-07: "add a site dark mode too"), following the device setting. The same
   evergreen bar and panels as the installed app; surfaces are deep evergreen-black, text is pale, links are the light green.
   Coral stays the one primary action with white text. Contrast on the dark canvas: ink 14:1, slate 9:1, light green 10:1;
   dark ink on a light green button 10:1. Photographs and the proof band are unchanged. */
@media (prefers-color-scheme: dark) {
  :root {
    --ivory: #0F1A17; --canvas: #0F1A17; --surface: #142420; --mint: #17302A; --line: #24352F;
    --ink: #E7EFEA; --slate: #B7C7C0; --sage: #7FB09D; --jade: #7FD6BB; --action: #7FD6BB;
  }
  /* surfaces: what was white paper becomes a dark card; --white itself stays white for text on evergreen */
  .skip, .evcard, .qcard, .card, .section--mint .ico, .step__art, .door, .fam li, .qa--lead, .qa--lead:first-child { background: var(--surface); }
  .faces img { background: var(--mint); }
  a:hover { color: #A4E6D3; }
  .brand img { filter: brightness(0) invert(1); }
  body::before {
    background:
      radial-gradient(circle at 88% 6%, transparent 539px, rgba(127, 176, 157, .3) 540px, rgba(127, 176, 157, .3) 542px, transparent 543px),
      radial-gradient(circle at 88% 6%, transparent 419px, rgba(127, 176, 157, .42) 420px, rgba(127, 176, 157, .42) 423px, transparent 424px),
      radial-gradient(circle at 88% 6%, transparent 299px, rgba(127, 176, 157, .34) 300px, rgba(127, 176, 157, .34) 302px, transparent 303px),
      radial-gradient(circle at 100% 0%, transparent 229px, rgba(127, 176, 157, .34) 230px, rgba(127, 176, 157, .34) 232px, transparent 233px),
      radial-gradient(circle at 100% 0%, transparent 149px, rgba(127, 176, 157, .28) 150px, rgba(127, 176, 157, .28) 152px, transparent 153px),
      radial-gradient(circle, rgba(127, 214, 187, .18) 1px, transparent 1.5px),
      radial-gradient(1100px 700px at 6% -12%, rgba(18, 89, 79, .62), transparent 62%),
      radial-gradient(760px 540px at 102% 18%, rgba(23, 48, 42, 1), transparent 62%),
      radial-gradient(900px 600px at -6% 78%, rgba(18, 89, 79, .36), transparent 62%),
      radial-gradient(900px 620px at 68% 112%, rgba(194, 73, 47, .13), transparent 62%);
    background-size: auto, auto, auto, auto, auto, 20px 20px, auto, auto, auto, auto; }
  .top { background: rgba(15, 26, 23, .9); }
  @media (max-width: 700px) { .top { background: rgba(15, 26, 23, .98); } }
  .top.is-scrolled { box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .8); }
  .nav a, .top__signin { color: var(--ink); }
  .nav a:hover, .nav a[aria-current="page"], .top__signin:hover { border-bottom-color: var(--jade); color: var(--ink); }
  .nav a.nav__jobs { color: var(--jade); border-color: var(--jade); }
  .nav a.nav__jobs:hover, .top.nav-open .nav-toggle { background: var(--jade); color: #0F1A17; border-color: var(--jade); }
  .nav-toggle { color: var(--jade); border-color: var(--jade); }
  h1, h2, h3 { color: var(--ink); }
  .btn--brand, .door--seek .door__go, .entry-candidate .entry-actions .entry-button, .btn--outline:hover { background: var(--jade); color: #0F1A17; }
  .btn--brand:hover, .entry-candidate .entry-actions .entry-button:hover { background: var(--action-dark); color: #0F1A17; }
  .btn--outline { color: var(--jade); border-color: var(--jade); }
  .entry-candidate { color: var(--ink); border-color: #24352F;
    background: linear-gradient(160deg, #1B3A33 0%, #17302A 52%, #122620 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 48px -30px rgba(0, 0, 0, .7); }
  .entry-candidate .arcs circle { stroke: rgba(127, 176, 157, .35); }
  .entry-candidate .arcs circle + circle { stroke: rgba(127, 176, 157, .12); }
  .entry-candidate .entry-label { color: var(--jade); }
  .entry-candidate .entry-copy { color: var(--slate); }
  .entry-candidate .entry-actions a { color: var(--jade); }
  .entry-employer { color: #FFFFFF; background: linear-gradient(160deg, #12594F 0%, #13433C 58%, #0C332D 100%);
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .8); border: 1px solid rgba(127, 176, 157, .18); }
  .entry-employer .entry-actions a, .entry-employer .entry-actions .entry-button { color: #FFFFFF; }
  .review__foot b { background: #E7EFEA; color: #13433C; }
  .entry-scene figcaption { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
  .entry-scene figcaption span { color: var(--jade); }
  .card, .evcard, .qcard, .step__art, .fam li, .qa--lead, .door { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .6); }
  .faces img { border-color: var(--line); }
  .skip { color: var(--ink); }
  .eyebrow { color: var(--jade); }
  .pagehead--dark .lede, .proof .lede, .band--cta p { color: #CFE0D8; }
  /* Operator's phone, 2026-11-07: dark text appeared on dark bands. Every text colour on an evergreen band is set here in
     plain hex, never by inheritance, and the job seeker button likewise. */
  .proof, .proof h2, .proof h3, .proof .proof__n, .band--cta, .band--cta h2, .pagehead--dark, .pagehead--dark h1, .pagehead--dark .eyebrow,
  .on-dark h1, .on-dark h2, .on-dark h3, .foot, .foot a, .foot__name, .entry-employer, .entry-employer h1, .review__head strong,
  .doc-rows li, .review__foot { color: #FFFFFF; }
  .proof p, .proof__list p, .proof li, .pagehead--dark p, .entry-employer .entry-copy, .band--cta p { color: #E7EFEA; }
  .proof .eyebrow, .pagehead--dark .eyebrow, .eyebrow--light, .entry-employer .entry-label { color: #A8CBBF; }
  .entry-candidate .entry-actions .entry-button, .entry-candidate .entry-actions .entry-button:hover { background: #7FD6BB; color: #0F1A17; }
  .entry-candidate h2, .entry-candidate .entry-copy { color: #E7EFEA; }
  .entry-candidate .entry-actions a:not(.entry-button), .entry-candidate .entry-label, .entry-scene figcaption span { color: #7FD6BB; }
  .entry-scene figcaption, .entry-scene figcaption strong { color: #E7EFEA; }
  .entry-scene figcaption small { color: #B7C7C0; }
  /* the same trap elsewhere: a surface token used as a text colour on an evergreen band */
  .card--accent h3, .card--accent p { color: #F4F7F2; }
  .lede--light, .hero-photo .eyebrow--light, .foot, .foot .muted, .foot__legal .muted { color: #E3EFEA; }
  .foot a, .foot__links a, .foot__name { color: #FFFFFF; }
}

@media (max-width: 360px) {
  .top__inner { gap: 8px; }
  .brand img { width: 84px; height: 27px; }
  .top .btn { padding: 0 12px; font-size: 14px; }
  .nav-toggle { min-width: 56px; padding: 0 10px; font-size: 14px; }
}

/* ---------- Sprint 2 (operator, KhulaWeb chat, 2026-11-07, "work in the new design language"): every inner page opens on the
   same panel as the first screen. Employer pages (How it works, Book a demo, For hiring teams) use the evergreen panel; the
   job seeker page, About and the 404 use the mint one. Same arcs, same chips, same type scale; the copy is unchanged. ---------- */
.first-screen--one { grid-template-columns: 1fr; padding-block: 24px 8px; }
.pagehead-panel { display: grid; grid-template-columns: 1fr; gap: 28px 56px; align-items: center; }
.pagehead-panel--split { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.pagehead-panel .entry-label { margin-bottom: 16px; }
.pagehead-panel h1 { max-width: 19ch; font-size: clamp(32px, 3.5vw, 52px); }
.pagehead-panel .entry-copy { max-width: 46ch; font-size: 18px; }
.pagehead-panel .entry-actions { margin-top: 2px; }
.pagehead-panel--center { text-align: center; justify-items: center; padding-block: clamp(48px, 7vw, 96px); }
.pagehead-panel--center h1, .pagehead-panel--center .entry-copy { margin-left: auto; margin-right: auto; }
.pagehead-panel--center .entry-actions { justify-content: center; }
.entry-employer .arcs { right: -200px; top: -260px; }
.entry-employer .arcs circle { stroke: rgba(255, 255, 255, .16); opacity: 1; }
.entry-employer .arcs circle + circle { stroke: rgba(255, 255, 255, .05); }
.ph__copy, .ph__aside { min-width: 0; }
.entry-fine { margin: 14px 0 0; font-size: 14px; max-width: 46ch; }
.entry-employer .entry-fine { color: rgba(255, 255, 255, .78); }
.entry-employer .entry-fine a { color: #FFFFFF; }
.entry-candidate .entry-fine { color: var(--slate); }
/* the secondary links of a panel are one group: phones keep them on one row under the button */
.entry-links { display: contents; }
.entry-actions .link-arrow::after { content: " \2192"; }

/* Product cards inside an evergreen panel: the queue, like the review card on the home page */
.entry-employer .qcard { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: #FFFFFF; box-shadow: none; padding: 20px 22px; }
.entry-employer .qcard .evcard__top { border-color: rgba(255, 255, 255, .12); }
.entry-employer .qcard .evcard__role { color: #FFFFFF; }
.entry-employer .qtable th { color: #A8CBBF; }
.entry-employer .qtable td { border-color: rgba(255, 255, 255, .1); color: #FFFFFF; }
.entry-employer .qcard__note { color: #E7EFEA; }
.entry-employer .tag, .review__head small, .entry-scene figcaption small {
  display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 3px 9px; }
.entry-employer .tag, .review__head small { background: rgba(168, 203, 191, .22); color: #DCEFE7; border: 1px solid rgba(255, 255, 255, .16); }
/* the "Example" marks are chips, not small print (KhulaAds 0186): they cannot read as an advertised role */
.review__head small { font-size: 10.5px; margin-bottom: 2px; }
.entry-scene figcaption small { background: var(--brand); color: #FFFFFF; font-size: 10px; margin-bottom: 2px; }
.ph__art { margin: 0; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; padding: 18px 22px; }
.ph__art .jart { max-width: 400px; margin: 0 auto; }
.ph__art .j-dev { stroke: rgba(255, 255, 255, .5); }

/* How it works: the five steps as numbered cards (the fifth spans the row) */
.stepcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; counter-reset: sc; }
.stepcards li { counter-increment: sc; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 28px 28px 96px; }
.stepcards li::before { content: counter(sc); position: absolute; left: 28px; top: 26px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--mint); color: var(--action); font: 700 18px/1 var(--display); display: grid; place-items: center; }
.stepcards li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.stepcards h2, .stepcards h3 { font-size: 20px; line-height: 1.3; margin: 10px 0 8px; letter-spacing: -0.01em; }
.stepcards p { margin: 0; color: var(--slate); max-width: 52ch; }

/* About: "Who we are" as a label column beside one statement (2026-11-09: the inline heading and sentence read as a run-on at 1440), the beliefs as icon cards */
.who { display: grid; grid-template-columns: 200px 1fr; gap: 8px 40px; align-items: start; padding: 0 0 32px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.who h2 { font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--action); margin: 0; padding-top: 10px; }
.who p { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); max-width: 26ch; }
.beliefs__h { margin-bottom: 28px; }
ul.beliefs { list-style: none; padding: 0; margin: 0; }
ul.beliefs li { padding: 32px; border-top: 1px solid var(--line); }
ul.beliefs h3 { font-size: 20px; margin-bottom: 6px; }
ul.beliefs p { margin: 0; color: var(--slate); }

/* For job seekers: the job families beside the words, in the mint panel */
.fam--panel { gap: 12px; }
.fam--panel li { padding: 14px 8px 12px; font-size: 14px; box-shadow: 0 10px 24px -18px rgba(18, 89, 79, .5); }
.fam--panel img { width: 64px; height: 64px; margin-bottom: 8px; border-width: 2px; }

/* Interaction details: anchors land below the sticky header, presses give, scrolling is smooth where motion is allowed */
[id] { scroll-margin-top: 96px; }
.btn:active, .entry-actions .entry-button:active, .nav-toggle:active, .door__go:active { transform: translateY(1px); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .pagehead-panel { animation: rise-move .7s cubic-bezier(.2, .7, .2, 1) both; }
  .stepcards li, ul.beliefs li { opacity: 0; transform: translateY(14px); animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .stepcards li:nth-child(2), ul.beliefs li:nth-child(2) { animation-delay: .08s; } .stepcards li:nth-child(3), ul.beliefs li:nth-child(3) { animation-delay: .16s; }
  .stepcards li:nth-child(4), ul.beliefs li:nth-child(4) { animation-delay: .24s; } .stepcards li:nth-child(5) { animation-delay: .32s; }
}

@media (max-width: 960px) {
  .pagehead-panel--split { grid-template-columns: 1fr; }
  .pagehead-panel h1 { max-width: none; }
}
@media (max-width: 700px) {
  .first-screen--one { padding-bottom: 4px; }
  .pagehead-panel { gap: 20px; }
  .pagehead-panel h1 { font-size: clamp(30px, 8.4vw, 38px); }
  .pagehead-panel .entry-copy { font-size: 15px; }
  .ph__aside--deco { display: none; }
  .entry-links { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: 2px 18px; }
  .stepcards { grid-template-columns: 1fr; gap: 12px; }
  .stepcards li { padding: 20px 20px 20px 74px; }
  .stepcards li::before { left: 20px; top: 20px; width: 38px; height: 38px; font-size: 16px; }
  .stepcards h2, .stepcards h3 { font-size: 18px; margin-top: 7px; }
  ul.beliefs li { padding: 22px 20px; }
  .who { grid-template-columns: 1fr; gap: 6px; padding-bottom: 24px; margin-bottom: 28px; }
  .who h2 { padding-top: 0; }
  .fam--panel { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .fam--panel li { padding: 10px 4px 8px; font-size: 12px; line-height: 1.2; }
  .fam--panel img { width: 48px; height: 48px; margin-bottom: 6px; }
}
@media (prefers-color-scheme: dark) {
  .entry-candidate h1 { color: #E7EFEA; }
  .entry-scene figcaption small { background: #7FD6BB; color: #0F1A17; }
  .entry-employer .tag, .review__head small { background: rgba(127, 176, 157, .22); color: #DCEFE7; }
  .stepcards li, ul.beliefs li { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .6); }
  .entry-candidate .entry-actions .link-arrow { color: #7FD6BB; }
}

/* ---------- Life in the employer backgrounds (operator, KhulaWeb chat, 2026-11-07: "very subtle and minimalist but not just flat").
   The evergreen panels and bands carry a faint sage dot grain, a soft glow top right and a touch of coral warmth low left, and
   one glow breathes very slowly. The page canvas gets a second, slowly drifting glow layer. All of it is transform animation on
   its own layer, none of it under prefers-reduced-motion. ---------- */
.band--cta { position: relative; overflow: hidden; }
.band--cta > .wrap, .proof > .wrap { position: relative; z-index: 1; }
.entry-employer::before, .proof::before, .band--cta::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle, rgba(168, 203, 191, .17) 1px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(640px 420px at 88% 0%, rgba(168, 203, 191, .20), transparent 62%),
    radial-gradient(560px 400px at 0% 100%, rgba(194, 73, 47, .16), transparent 62%); }
.entry-employer::after, .proof::after, .band--cta::after { content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 720px; height: 720px; right: -260px; top: -300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 203, 191, .22), rgba(168, 203, 191, 0) 62%); }
.band--cta::after { top: -420px; }
body::after { content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 600px at 18% 8%, rgba(168, 203, 191, .36), transparent 62%),
    radial-gradient(760px 560px at 86% 92%, rgba(194, 73, 47, .1), transparent 62%); }
@keyframes breathe { from { transform: translate3d(0, 0, 0) scale(1); opacity: .9; } to { transform: translate3d(-6%, 5%, 0) scale(1.08); opacity: 1; } }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(2.5%, 1.5%, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .entry-employer::after, .proof::after, .band--cta::after { animation: breathe 26s ease-in-out infinite alternate; }
  body::after { animation: drift 40s ease-in-out infinite alternate; }
}
@media (prefers-color-scheme: dark) {
  .entry-employer::before, .proof::before, .band--cta::before {
    background:
      radial-gradient(circle, rgba(127, 176, 157, .14) 1px, transparent 1.5px) 0 0 / 22px 22px,
      radial-gradient(640px 420px at 88% 0%, rgba(127, 214, 187, .12), transparent 62%),
      radial-gradient(560px 400px at 0% 100%, rgba(194, 73, 47, .12), transparent 62%); }
  .entry-employer::after, .proof::after, .band--cta::after { background: radial-gradient(circle, rgba(127, 214, 187, .14), rgba(127, 214, 187, 0) 62%); }
  body::after { background:
      radial-gradient(900px 600px at 18% 8%, rgba(18, 89, 79, .42), transparent 62%),
      radial-gradient(760px 560px at 86% 92%, rgba(194, 73, 47, .09), transparent 62%); }
}

/* Sprint 2 fixes after the first captures */
.entry-actions .link-arrow::after { content: "\2192"; margin-left: 6px; }
@media (max-width: 700px) {
  .entry-employer .qcard { padding: 16px; }
  .entry-employer .qcard .evcard__role { font-size: 15px; }
  .entry-employer .qtable { font-size: 13px; }
  .entry-employer .qtable th { font-size: 11px; padding-right: 6px; }
  .entry-employer .qtable td { padding: 9px 6px 9px 0; }
  .entry-employer .qtable td:first-child, .entry-employer .qtable th:first-child { white-space: nowrap; }
}
/* a link inside a band's text is white, never the page link colour (contrast walk, For hiring teams, 2026-11-07) */
.band--cta p a { color: #FFFFFF; }
.band--cta p a:hover { color: #E3EFEA; }

/* ---------- Phone fold (operator, gated answer, 2026-11-07: "home below the fold on phones", copy uncut) ----------
   The five employer cards are <details> that ship open. On desktop the summary is the heading, nothing to click. Under
   700 px, once site.js has run (html.js-fold), the cards read as five headings with a chevron; the first is open, one
   opens at a time (name="today"). The journey becomes a swipeable row of three; the job families sit in three columns. */
details.card > summary { list-style: none; cursor: default; display: block; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h3 { display: block; }
.card__more { display: none; }
@media (max-width: 700px) {
  html.js-fold details.card { padding: 0; }
  html.js-fold details.card > summary { cursor: pointer; padding: 18px 20px; display: grid; grid-template-columns: 40px 1fr 24px; gap: 14px;
    align-items: center; min-height: 64px; }
  html.js-fold details.card > summary .ico { width: 40px; height: 40px; padding: 8px; margin: 0; }
  html.js-fold details.card > summary h3 { margin: 0; font-size: 18px; line-height: 1.25; }
  html.js-fold .card__more { display: block; width: 24px; height: 24px; position: relative; }
  html.js-fold .card__more::before { content: ""; position: absolute; left: 7px; top: 6px; width: 8px; height: 8px;
    border-right: 2px solid var(--action); border-bottom: 2px solid var(--action); transform: rotate(45deg); transition: transform .2s ease; }
  html.js-fold details.card[open] .card__more::before { transform: rotate(-135deg); top: 10px; }
  html.js-fold details.card > .ticks { padding: 0 20px 20px 74px; margin: 0; }
  html.js-fold details.card > summary:focus-visible { outline-offset: -3px; border-radius: var(--r); }
  html.js-fold .cards2 { gap: 10px; }
  /* the journey as a row: swipe through the three steps, the next one peeking */
  .journey__steps { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 12px; margin: 0 -16px;
    scroll-padding-inline: 16px; /* the snap aligns to the scrollport edge, not the padding: without this the first card sat flush at 0 (phone walk, 2026-11-08) */
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .journey__steps::-webkit-scrollbar { display: none; }
  .journey__steps .step { flex: 0 0 82%; scroll-snap-align: start; gap: 12px; }
  .journey__steps .step:not(:last-child)::after { display: none; }
  .step__art { max-width: none; padding: 10px 8px 6px; }
  .step__text p { font-size: 15px; }
  .journey { padding-top: 32px; }
  .journey .section__head { margin-bottom: 20px; }
  /* job families: three across, smaller tiles */
  .fam { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .fam li { padding: 12px 6px 10px; font-size: 13px; line-height: 1.2; }
  .fam img { width: 56px; height: 56px; margin-bottom: 8px; border-width: 2px; }
  .seekers__grid { gap: 24px; }
  .human__grid { gap: 20px; }
  .section { padding: 56px 0; }
}

/* Card headings as h2 where the card sits straight under the page's h1 (demo, For hiring teams): the h3 look, the right level (a11y walk, 2026-11-08) */
.cards3 .card > h2, .cards2 .card > h2 { font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 16px; }

/* Speed pass 2026-11-08: on phones, everything below the first screen is laid out only when it comes near the viewport
   (content-visibility: auto). The home page's first paint on a slow phone was waiting on the layout of the whole page,
   most of it the proof band's drawing and the five cards; this skips that work until it is needed. The reveal observer,
   the fold script and the scene pause all still find their elements. */
@media (max-width: 700px) {
  .journey, .proof, .today, .human, .seekers, .band--cta, .foot, .section:not(.first-screen) { content-visibility: auto; contain-intrinsic-size: auto 720px; }
}