/* Youth Futures Canada — the three public landings (/employer, /consultant, /jobseeker). Mobile first; tokens from
   theme.css only. Skeleton (identical on all three, 2026 editorial rework): .page-head hero (no illustration mockup —
   a stat strip instead) → .section numbered tile grid (dashboard/features) → .section--alt audiences (5-grid)
   → .section numbered tile "how it works" (same tile language as the feature grid, not circular step badges)
   → .section--alt numbered tile "what every posting needs" → .section pricing (a solid navy panel + aside)
   → .section FAQ (details cards) → .section--alt closing CTA band.
   Every class is prefixed `landing-` (or `cta-band`) so the stale landing blocks still in portal.css / seeker.css
   (loaded before this file) cannot leak in. */

/* ---------- hero: the standard .page-head, no illustration mockup — a stat strip carries the facts instead ---------- */
/* employer hero: the "Post → Reach → Review → Hire" idea used to live here as a small text tag, plus a second,
   separate numbered grid further down the page (#hiring-flow / .workflow-chain--4) restating the same four words.
   Both are gone now — see .hire-pipeline below, which is the one place this page states and visualises the flow. */

/* job seeker hero — a compact "Start → Experience → Career" progress tag (the full 5-stage version lives below in #stages) */
.career-track { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font: 700 .75rem/1 var(--kds-font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--kds-fg-faint); }
.career-track li:not(:last-child)::after { content: "→"; margin-left: 8px; color: var(--cc-line-strong); }
.career-track .is-active { color: var(--cc-orange-700); }

/* partner hero: the small "network glyph" widget that used to live here (one account branching to clients)
   is gone — see .partner-hub below, which is now the page's structural spine, not a small hero aside. */

.landing-head .lead { max-width: 60ch; }
.landing-head h1 { max-width: 20ch; }
.landing-head__note { display: none; }
.landing-head__cta { margin-top: 12px; }
.landing-head__cta .kds-btn { flex: 1 1 auto; }
@media (min-width: 640px) { .landing-head__cta .kds-btn { flex: 0 0 auto; } }

/* stat strip under the hero (same family as the About page's stat band, job-facts, etc.) */
.landing-facts-band { background: var(--cc-navy-50); border-bottom: 1px solid var(--kds-border); }
.landing-facts { list-style: none; margin: 0 auto; padding: 16px; display: flex; flex-wrap: wrap; gap: 14px 0; }
.landing-facts li { flex: 1 1 45%; padding: 4px 16px 4px 0; border-right: 1px solid var(--cc-line-strong); min-width: 0; }
.landing-facts li:nth-child(2n) { border-right: 0; }
.landing-facts strong { display: block; font: 800 1.0625rem/1.2 var(--cc-font-display); color: var(--cc-navy); }
.landing-facts span { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--kds-fg-muted); }
/* each stat gets its own colour instead of four identical navy numbers in a row */
.landing-facts li:nth-child(1) strong { color: var(--cc-orange-700); }
.landing-facts li:nth-child(2) strong { color: var(--cc-spark-700); }
.landing-facts li:nth-child(4) strong { color: var(--cc-red-700); }
@media (min-width: 640px) {
  .landing-facts { flex-wrap: nowrap; padding: 18px 24px; }
  .landing-facts li { flex: 1 1 0; border-right: 1px solid var(--cc-line-strong); padding-right: 20px; }
  .landing-facts li:last-child { border-right: 0; }
}

/* ---------- career journey: five stages as a connected progression (numbered, joined by a line),
   not five identical cards in a row. Shared by employer/consultant ("reach") and seeker ("your path"). ---------- */
.landing-journey { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 32px; grid-template-columns: 1fr; counter-reset: stage; }
.landing-journey__step { counter-increment: stage; position: relative; padding-left: 56px; }
/* explicit calc() height, not top+bottom (which under-measures against this auto-height grid item — same
   issue found and fixed on .workflow-chain--vertical), so the line always reaches the next node exactly. */
.landing-journey__step:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 44px; width: 2px; height: calc(100% - 44px + 32px); background: var(--cc-line-strong); }
.landing-journey__num { position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--cc-navy); color: #fff; font: 800 .9375rem/1 var(--cc-font-display); }
.landing-journey__num::before { content: counter(stage); }
/* warm start, calm middle, red close: orange/yellow open the sequence instead of every step reading navy */
.landing-journey__step:first-child .landing-journey__num { background: var(--cc-orange); color: var(--cc-ink); }
.landing-journey__step:nth-child(2) .landing-journey__num { background: var(--cc-spark); color: var(--cc-ink); }
.landing-journey__step:nth-child(4) .landing-journey__num { background: var(--cc-orange); color: var(--cc-ink); }
.landing-journey__step:last-child .landing-journey__num { background: var(--cc-red-700); }
.landing-journey__step h3 { margin: 6px 0 4px; }
.landing-journey__step p { margin: 0; color: var(--kds-fg-muted); max-width: 48ch; }
.landing-journey__step a { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; font-weight: 600; font-size: .875rem; text-decoration: none; color: var(--cc-navy); }
.landing-journey__step a:hover { color: var(--cc-red-700); }
@media (min-width: 1024px) {
  .landing-journey:not(.landing-journey--stack) { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .landing-journey:not(.landing-journey--stack) .landing-journey__step { padding-left: 0; padding-top: 56px; }
  .landing-journey:not(.landing-journey--stack) .landing-journey__num { left: 0; top: 0; }
  .landing-journey:not(.landing-journey--stack) .landing-journey__step:not(:last-child)::after { left: 40px; right: -4px; top: 19px; bottom: auto; width: auto; height: 2px; }
  /* .landing-journey--stack (partner page): stays the vertical connected list at every width, so its talent
     spectrum reads differently from the employer page's horizontal one. Widened from an earlier 640px cap
     that left it hugging the left edge of the page container; title now sits beside its description in one
     wider row instead of both stacking in a narrow column. */
  .landing-journey--stack { max-width: 960px; }
  .landing-journey--stack .landing-journey__step { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; column-gap: 40px; align-items: baseline; padding-left: 76px; }
  .landing-journey--stack .landing-journey__step h3 { margin: 0; }
  .landing-journey--stack .landing-journey__step p { margin: 0; max-width: 56ch; }
  .landing-journey--stack .landing-journey__step a { grid-column: 2; margin-top: 0; }
}

/* ---------- benefits strip: a compact 3-up supporting strip. "Where are you starting?" (below) is now the
   page's centerpiece, so this section is deliberately understated — three short facts in a row, not an
   editorial lead-point-plus-support layout — so the page doesn't read as a stacked article. Same 3 pieces of
   copy as before, just presented compactly. ---------- */
.benefits-strip { list-style: none; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--kds-border); display: grid; gap: 20px; grid-template-columns: 1fr; }
.benefits-strip__n { display: block; font: 800 .75rem/1 var(--cc-font-display); color: var(--cc-line-strong); margin-bottom: 6px; }
.benefits-strip h3 { margin: 0 0 4px; font-size: .9375rem; }
.benefits-strip p { margin: 0; color: var(--kds-fg-muted); font-size: .8125rem; }
@media (min-width: 700px) {
  .benefits-strip { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .benefits-strip li:not(:first-child) { padding-left: 32px; border-left: 1px solid var(--kds-border); }
}

/* ---------- numbered process: oversized flat numbers in a connected horizontal flow, distinct from
   the circular-dot journey above — used for "how it works" (2-3 short steps). ---------- */
.proc-flow { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 28px; grid-template-columns: 1fr; counter-reset: proc; }
.proc-flow__step { position: relative; display: grid; gap: 10px; }
.proc-flow__n { font: 800 3rem/1 var(--cc-font-display); color: var(--cc-navy-100); }
.proc-flow__step h3 { margin: 0; }
.proc-flow__step p { margin: 0; color: var(--kds-fg-muted); max-width: 40ch; }
@media (min-width: 900px) {
  .proc-flow { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .proc-flow__step { padding-right: 32px; }
  .proc-flow__step:not(:last-child)::after { content: "→"; position: absolute; right: -4px; top: 8px; font-size: 1.5rem; color: var(--cc-line-strong); }
}

/* ============================================================================
   job-seeker "Where are you starting?" stage path (2026-09-18, static pass). ONE connected vertical path — all
   five stages, their titles and their descriptions/opportunity counts, are visible at once. Plain, non-
   interactive markup (no <details>, no click target) — a row only tints on :hover, purely as a light editorial
   touch. Unique class names (`.stage-path*`) so this cannot collide with `.workflow-chain`, `.landing-journey`,
   `.proc-flow`, `.hire-route`, `.network-glyph` or `.client-switch` used/extended elsewhere. --------------- */
.stage-path { list-style: none; margin: 28px 0 0; padding: 0; max-width: 640px; }
.stage-path__stop { position: relative; padding-bottom: 4px; }
.stage-path__stop:last-child { padding-bottom: 0; }
/* explicit calc() height, not top+bottom (which under-measures against this auto-height list — the same issue
   already found and fixed once on .workflow-chain--vertical), so the line always reaches the next node exactly. */
.stage-path__stop:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 40px; width: 2px; height: calc(100% - 40px + 4px); background: var(--cc-line-strong); }
.stage-path__row { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 8px 12px 8px 0; border-radius: 4px; transition: background-color .15s; }
.stage-path__row:hover { background: var(--cc-red-100); }
.stage-path__node { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--cc-navy); border: 2px solid var(--cc-navy); color: #fff; font: 800 1rem/1 var(--cc-font-display); }
/* the 5 career stages get their own place in the warm-to-structure arc instead of one flat navy circle repeated
   five times — start warm (orange/yellow), settle into navy, close on red/navy like the other journey components */
.stage-path__stop:nth-child(1) .stage-path__node { background: var(--cc-orange); border-color: var(--cc-orange); color: var(--cc-ink); }
.stage-path__stop:nth-child(2) .stage-path__node { background: var(--cc-spark); border-color: var(--cc-spark); color: var(--cc-ink); }
.stage-path__stop:nth-child(4) .stage-path__node { background: var(--cc-red-700); border-color: var(--cc-red-700); }
.stage-path__title { flex: 1 1 auto; min-width: 0; font: 700 1.0625rem/1.3 var(--cc-font-display); color: var(--cc-navy); }
.stage-path__tag { flex: none; font: 700 .625rem/1 var(--kds-font-sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--cc-red-700); padding: 5px 10px; border-radius: 999px; }
.stage-path__detail { padding: 2px 12px 20px 72px; }
.stage-path__desc { margin: 0 0 10px; color: var(--kds-fg-muted); max-width: 48ch; }
.stage-path__cta { display: inline-flex; align-items: center; min-height: 32px; font: 800 .9375rem/1 var(--cc-font-display); color: var(--cc-red-700); text-decoration: none; }
.stage-path__cta:hover { color: var(--cc-navy); }

/* ---------- client switch: "Partner account → Client A/B/C", one active at a time — a relationship system,
   not a marketing card grid. Illustrative only (data-client-switch in landing.js toggles .is-active). ---------- */
.client-switch { margin-top: 28px; max-width: 960px; }
.client-switch__account { margin: 0 0 16px; font: 700 .75rem/1 var(--kds-font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--kds-fg-faint); }
.client-switch__tabs { display: flex; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--kds-border); padding-bottom: 0; }
.client-switch__tab { min-height: 48px; padding: 0 20px; border: 1px solid var(--kds-border); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--cc-surface); color: var(--cc-navy); font: 700 .9375rem/1 var(--cc-font-display); cursor: pointer; transition: background-color .15s, color .15s; }
.client-switch__tab:hover { color: var(--cc-orange-700); }
.client-switch__tab.is-active { background: var(--cc-navy); color: #fff; border-color: var(--cc-navy); }
.client-switch__note { margin: 14px 0 0; }

/* ---------- posting specimen: an annotated example posting (a labelled document), not a 3-card row.
   Each field gets its label from the data-annotate attribute itself, so the markup stays plain content. ---------- */
.specimen-split { margin-top: 8px; display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
.specimen { background: #fff; border: 1px solid var(--kds-border); border-radius: var(--kds-radius-md, 8px); padding: 28px 24px; position: relative; }
.specimen__tag { position: absolute; top: 20px; right: 24px; margin: 0; font: 700 .6875rem/1 var(--kds-font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--kds-fg-faint); }
.specimen__title { margin: 0 0 20px; padding-right: 110px; font-size: 1.375rem; color: var(--cc-navy); }
.specimen__field { margin: 0 0 20px; font: 700 1.0625rem/1.4 var(--cc-font-display); color: var(--cc-ink); }
.specimen__field:last-child { margin-bottom: 0; }
.specimen__field::before { content: attr(data-annotate); display: block; margin-bottom: 4px; font: 700 .6875rem/1 var(--kds-font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--cc-red-700); }
.specimen__note { display: block; margin-top: 2px; font: 500 .8125rem/1.4 var(--kds-font-sans); color: var(--kds-fg-muted); }
.specimen__row { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) {
  .specimen-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; }
  .specimen-split__statement { position: sticky; top: calc(var(--cc-header-h) + 24px); }
  .specimen { padding: 36px 40px; }
}

/* ---------- proof split: a statement on one side, proof points stacked on the other — not a 3-card row ---------- */
.proof-split { margin-top: 8px; display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
.proof-split__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.proof-split__points li { padding: 18px 0; border-top: 1px solid var(--kds-border); }
.proof-split__points li:last-child { border-bottom: 1px solid var(--kds-border); }
.proof-split__points h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.proof-split__points p { margin: 0; color: var(--kds-fg-muted); font-size: .9375rem; }
@media (min-width: 900px) {
  .proof-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; }
  .proof-split__statement { position: sticky; top: calc(var(--cc-header-h) + 24px); }
}

/* ---------- workflow chain: a labelled pipeline (account → clients → postings → visibility), used on the
   employer page (Post→Reach→Review→Hire) and the consultant page in place of a plain feature grid. Large
   numbers + a hover/focus-active state, so a stage genuinely responds instead of just sitting in a row. ---------- */
.workflow-chain { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 2px; grid-template-columns: 1fr; background: var(--kds-border); counter-reset: flow; }
.workflow-chain__step { counter-increment: flow; position: relative; background: #fff; padding: 28px 26px; display: grid; gap: 10px; transition: background-color .15s; }
.workflow-chain__step::before { content: counter(flow, decimal-leading-zero); font: 800 1.5rem/1 var(--cc-font-display); color: var(--cc-line-strong); letter-spacing: 0; transition: color .15s; }
.workflow-chain__step h3 { margin: 0; font-size: 1.0625rem; }
.workflow-chain__step p { margin: 0; color: var(--kds-fg-muted); font-size: .9375rem; }
.workflow-chain__step:hover, .workflow-chain__step:focus-within { background: var(--cc-red-100); }
.workflow-chain__step:hover::before, .workflow-chain__step:focus-within::before { color: var(--cc-red-700); }
@media (min-width: 900px) {
  .workflow-chain { grid-template-columns: repeat(3, 1fr); }
  .workflow-chain--4 { grid-template-columns: repeat(4, 1fr); }
  .workflow-chain__step:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: var(--cc-navy); color: #fff; display: grid; place-items: center; font-size: .9375rem; }
  .workflow-chain__step:last-child::before { color: var(--cc-red-700); }
}

/* vertical variant — the partner "account → clients → postings → billing" pipeline stays a single column and
   connected by a line even at desktop, so it reads as a hierarchy rather than the employer page's horizontal
   flow (same brand system, deliberately different shape). Widened from an earlier 560px cap, which left the
   section hugging the left edge of the page container with unused whitespace on the right — the number/title
   now sits beside the description in one wider editorial row instead of stacking both above it. */
.workflow-chain--vertical { grid-template-columns: 1fr !important; background: none; gap: 0; counter-reset: flow; max-width: 960px; }
.workflow-chain--vertical .workflow-chain__step { background: none; padding: 0 0 0 64px; margin-bottom: 32px; }
.workflow-chain--vertical .workflow-chain__step::before { position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--cc-navy); color: #fff; font-size: 1.0625rem; }
.workflow-chain--vertical .workflow-chain__step:hover::before, .workflow-chain--vertical .workflow-chain__step:focus-within::before { background: var(--cc-red-700); color: #fff; }
/* a connecting line between circles, reaching all the way to the next one. An explicit calc() height (not
   top+bottom, which under-measured here against this auto-height grid step) so it always spans exactly from
   this circle's bottom to the next circle's top regardless of how tall the step's own text runs. */
.workflow-chain--vertical .workflow-chain__step:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; width: 2px; height: calc(100% - 44px + 28px); background: var(--cc-line-strong); }
.workflow-chain--vertical .workflow-chain__step:last-child::before { background: var(--cc-red-700); }
.workflow-chain--vertical .workflow-chain__step:last-child { margin-bottom: 0; }
@media (min-width: 700px) {
  /* number+title beside the description, one wider row — not four cards, not a single narrow column */
  .workflow-chain--vertical .workflow-chain__step { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; column-gap: 40px; align-items: baseline; padding-left: 84px; }
  .workflow-chain--vertical .workflow-chain__step h3 { margin: 0; }
  .workflow-chain--vertical .workflow-chain__step p { margin: 0; max-width: 56ch; }
}

/* ---------- five-column audience grid (1 → 2 → 5) — still used by pathway-style contexts elsewhere ---------- */
.grid--5 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }


/* ---------- pricing: a price stat beside a compact fact list — not a checklist card ---------- */
.price-split { display: grid; gap: 2px; grid-template-columns: 1fr; background: var(--kds-border); }
.price-split__figure { background: var(--cc-navy); color: #fff; padding: 40px 32px; display: grid; gap: 16px; align-content: center; justify-items: center; text-align: center; }
.price-split__figure .eyebrow { margin-bottom: 4px; color: var(--cc-spark); }
.price-split__figure .eyebrow::before { background: var(--cc-spark); }
.price-split__amount { margin: 0; font: 800 clamp(3.5rem, 2vw + 3rem, 5rem)/1 var(--cc-font-display); color: #fff; }
.price-split__amount span { display: block; margin-top: 10px; font: 500 .9375rem/1.3 var(--kds-font-sans); color: color-mix(in srgb, #fff 65%, transparent); text-transform: none; }
.price-split__total { margin: 0; font-size: .875rem; color: color-mix(in srgb, #fff 78%, transparent); }
.price-split__total strong { color: #fff; }
.price-split__figure .kds-btn { margin-top: 10px; justify-self: stretch; }
.price-split__figure .kds-btn--accent { background: var(--cc-red-700); color: #fff; }
.price-split__figure .kds-btn--accent:hover { background: var(--cc-red-900); color: #fff; }
.price-split__facts { background: var(--cc-surface); padding: 40px 32px; margin: 0; display: grid; gap: 14px; align-content: start; }
.price-split__facts > div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--kds-border); font-size: .9375rem; }
.price-split__facts dt { color: var(--kds-fg-muted); }
.price-split__facts dd { margin: 0; font-weight: 600; color: var(--cc-ink); text-align: right; }
.price-split__aside { background: #fff; padding: 40px 32px; }
.price-split__aside h3 { margin-top: 0; }
@media (min-width: 700px) { .price-split { grid-template-columns: repeat(2, 1fr); } .price-split__aside { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .price-split { grid-template-columns: minmax(280px, 360px) minmax(280px, 1fr) minmax(280px, 1fr); } .price-split__aside { grid-column: auto; } }

/* ---------- "Need to know" FAQ: an editorial, navigable info section — a category rail beside a column of
   plain question rows — not a stack of identical rounded accordion cards. Shared by Employer, Consultant, Job
   Seeker and Our Story (views/portal/partials/landing-faq.ejs), so this is the one FAQ visual language for the
   whole site. Category filtering (public/js/site.js, [data-faq-nav]/[data-faq-group]) is pure progressive
   enhancement: every question from every category renders and expands with no JS at all — JS only narrows the
   right column to one category at a time and never touches the underlying content. */
.needknow { display: grid; gap: 28px; }
.needknow__head { min-width: 0; }
.needknow__head .lead { max-width: 46ch; }
.needknow__cats { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.needknow__cat { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid transparent; background: none; padding: 10px 0 10px 16px; font: 700 .9375rem/1.3 var(--cc-font-display); color: var(--kds-fg-muted); cursor: pointer; transition: color .15s, border-color .15s; }
.needknow__cat:hover { color: var(--cc-navy); }
.needknow__cat.is-active { color: var(--cc-orange-700); border-left-color: var(--cc-orange); }
.needknow__panel { min-width: 0; }
.needknow__group.needknow__group--hidden { display: none; }
.needknow__q { padding: 0; border-bottom: 1px solid var(--kds-border); }
.needknow__q:first-child { border-top: 1px solid var(--kds-border); }
.needknow__q summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; min-height: 44px; padding: 16px 0; }
.needknow__q summary::-webkit-details-marker { display: none; }
.needknow__q-cat { flex: 1 1 100%; order: -1; font: 700 .6875rem/1 var(--kds-font-sans); text-transform: uppercase; letter-spacing: .07em; color: var(--cc-orange-700); }
.needknow__q-text { flex: 1 1 auto; min-width: 0; font: 700 1.0625rem/1.4 var(--cc-font-display); color: var(--cc-navy); }
.needknow__q-toggle { flex: none; position: relative; width: 20px; height: 20px; }
.needknow__q-toggle::before, .needknow__q-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--kds-fg-muted); transition: transform .15s, background-color .15s; }
.needknow__q-toggle::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.needknow__q-toggle::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.needknow__q[open] .needknow__q-toggle::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.needknow__q summary:hover .needknow__q-toggle::before, .needknow__q summary:hover .needknow__q-toggle::after { background: var(--cc-orange); }
.needknow__a { padding: 0 0 20px; max-width: 68ch; color: var(--kds-fg-muted); }
.needknow__a p { margin: 0 0 .6em; }
.needknow__a p:last-child { margin-bottom: 0; }
.needknow__more { font-weight: 600; }
.needknow__more a { color: var(--cc-navy); }
.needknow__more a:hover { color: var(--cc-orange-700); }
.needknow__foot { margin: 20px auto 0; }
@media (max-width: 899px) {
  /* phone/tablet: the category rail becomes a horizontal scroller of plain text tabs, never a card grid */
  .needknow__cats { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 4px; margin-top: 20px; padding-bottom: 2px; }
  .needknow__cat { flex: none; width: auto; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; padding: 10px 14px; }
  .needknow__cat.is-active { border-left-color: transparent; border-bottom-color: var(--cc-orange); }
}
@media (min-width: 900px) {
  .needknow { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); gap: 56px; }
  .needknow__head { position: sticky; top: calc(var(--cc-header-h) + 24px); align-self: start; }
}

/* ---------- closing CTA band (inside .section--alt) ---------- */
.cta-band { display: grid; gap: 16px; align-items: center; }
.cta-band h2, .cta-band p { margin: 0; }
.cta-band p { margin-top: 6px; max-width: 60ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-band__actions .kds-btn { flex: 1 1 auto; }
@media (min-width: 640px) { .cta-band__actions .kds-btn { flex: 0 0 auto; } }
@media (min-width: 768px) { .cta-band { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; } }

/* =====================================================================================================
   EMPLOYER ONLY — hire pipeline (POST → REACH → REVIEW → HIRE)
   New, uniquely-named component (`.hire-pipeline*`) so it can't collide with `.workflow-chain`,
   `.landing-journey`, `.proc-flow`, `.client-switch` or `.network-glyph`, which are shared with, or
   reserved for, the consultant/job-seeker pages.

   This replaces two things that used to say the same thing twice, in two different visual languages:
   the small `.hire-route` text tag that lived in the hero, and the separate `#hiring-flow` eyebrow+h2+
   numbered-grid section further down (the exact same "eyebrow, h2, lead, numbered card row" formula
   used by every other section on this page). Now the idea has one dominant expression: a single
   connected bar, immediately under the hero, that visibly narrows and darkens left→right — four stages,
   one outcome. Flat colour blocks divided by a 2px hairline gap (the same "background-as-divider"
   technique already used by .workflow-chain and .price-split on this page), not cards, not shadows,
   not rounded corners — so it reads as one mechanism rather than four separate tiles restating a list.
   ===================================================================================================== */
.hire-pipeline .eyebrow { margin-bottom: 4px; }
.hire-pipeline__row {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--kds-border); border: 1px solid var(--kds-border);
}
.hire-pipeline__stage { background: #fff; padding: 26px 24px; display: grid; gap: 10px; align-content: start; border-top: 3px solid var(--cc-orange); }
.hire-pipeline__head { display: flex; align-items: baseline; gap: 14px; }
.hire-pipeline__num { font: 800 1.375rem/1 var(--cc-font-display); color: var(--cc-orange-700); }
.hire-pipeline__stage h3 { margin: 0; font-size: 1.3125rem; color: var(--cc-navy); }
.hire-pipeline__stage p { margin: 0; color: var(--kds-fg-muted); max-width: 46ch; }
/* colour moves warm -> calm -> emphasis: orange (post) -> yellow (reach) -> navy (review) -> red (hire) —
   carried by the top rule + number only, so all four panels share one calm white surface instead of
   jumping from pale tints straight to fully-saturated blocks. */
.hire-pipeline__stage--reach { border-top-color: var(--cc-spark); }
.hire-pipeline__stage--reach .hire-pipeline__num { color: var(--cc-spark-700); }
.hire-pipeline__stage--review { border-top-color: var(--cc-navy); }
.hire-pipeline__stage--review .hire-pipeline__num { color: var(--cc-navy); }
.hire-pipeline__stage--hire { border-top-color: var(--cc-red); }
.hire-pipeline__stage--hire .hire-pipeline__num { color: var(--cc-red-700); }
@media (min-width: 640px) {
  .hire-pipeline__head { gap: 16px; }
  .hire-pipeline__stage p { max-width: 52ch; }
}
@media (min-width: 900px) {
  .hire-pipeline__row { flex-direction: row; align-items: stretch; }
  .hire-pipeline__stage { flex: 1 1 0; padding: 32px 28px; }
  .hire-pipeline__stage p { max-width: 40ch; }
}

/* =====================================================================================
   Consultant page only — partner hub-and-spoke (class prefix `partner-hub`, owned by this
   page; does not collide with .workflow-chain / .landing-journey / .proc-flow / .hire-route /
   .stage-path / .hire-pipeline / .client-switch, which belong to other pages or other
   sections of this one).

   Replaces the old small `.network-glyph` hero widget + the separate `.workflow-chain--vertical`
   "Everything you manage" list with ONE diagram: a real branching tree, not a straight pipeline
   (the employer page's pipeline is deliberately linear/horizontal — this is deliberately not).
   One "Partner account" root branches to a "Clients" tier (illustrative Client A/B/C), which
   itself branches again into the two things every client's work runs through — Postings and
   Billing — so CLIENT → POSTING(S) → BILLING reads as an actual shape, not a bullet list.
   Copy is verbatim, only moved from the old workflow-chain list into this tree.

   Layout: mobile (<768px) is a left-rail vertical tree — every branch just needs a short tick off
   a single spine, so it never needs the row to fit on one line. Desktop (>=768px) switches to a
   real two-level org-chart using the classic CSS-only "corner border" connector technique (each
   row item draws its own top-left/top-right quarter, first/last child trims the outward half) —
   that technique only works while a row's children sit on one line, hence the swap at 768px
   instead of only shrinking sizes. ===================================================== */
.partner-hub { margin: 32px auto 0; max-width: 860px; display: grid; justify-items: center; }
.partner-hub__root { width: 100%; max-width: 360px; box-sizing: border-box; text-align: center; padding: 18px 22px; background: var(--cc-navy-50); border: 1px solid var(--cc-line-strong); border-top: 3px solid var(--cc-navy); }
.partner-hub__root h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.partner-hub__root p { margin: 0; color: var(--kds-fg-muted); font-size: .875rem; }
.partner-hub__trunk { width: 2px; height: 28px; background: var(--cc-line-strong); }
.partner-hub__caption { max-width: 480px; text-align: center; margin: 20px 0 0; }
.partner-hub__caption h3 { margin: 0 0 4px; font-size: 1rem; }
.partner-hub__caption p { margin: 0; color: var(--kds-fg-muted); font-size: .875rem; }

/* mobile-first row: a vertical list off a single left rail, each item ticking off it */
.partner-hub__row { list-style: none; width: 100%; margin: 20px 0 0; padding: 4px 0 4px 24px; display: flex; flex-direction: column; gap: 14px; border-left: 1px dashed var(--cc-line-strong); margin-left: 11px; }
.partner-hub__node { position: relative; border: 1px solid var(--kds-border); background: #fff; padding: 12px 16px; box-sizing: border-box; }
.partner-hub__row .partner-hub__node::before { content: ""; position: absolute; top: 18px; left: -24px; width: 20px; height: 1px; background: var(--cc-line-strong); }
.partner-hub__node--chip { font: 700 .875rem/1 var(--cc-font-display); color: var(--cc-navy); text-align: center; }
.partner-hub__node--card h3 { margin: 0 0 6px; font-size: 1rem; }
.partner-hub__node--card p { margin: 0; color: var(--kds-fg-muted); font-size: .875rem; }
.partner-hub__node--card { border-top: 3px solid var(--cc-orange); }

@media (min-width: 768px) {
  .partner-hub__row { flex-direction: row; justify-content: center; align-items: stretch; flex-wrap: nowrap; gap: 20px; padding: 0; border-left: 0; margin-left: 0; }
  .partner-hub__row .partner-hub__node { flex: 1 1 220px; max-width: 240px; padding-top: 32px; }
  /* classic CSS-only tree connector: each node draws the half of the horizontal bar (+ the drop
     to its own box) that faces its neighbours; the outer half is trimmed on the first/only/last
     node so the bar never overshoots past the actual row of nodes. `background: none` explicitly
     clears the mobile-rail tick mark's solid fill above — without it, ::before (which the mobile
     rule also targets) keeps that fill and renders as a filled block instead of a thin line. */
  .partner-hub__row .partner-hub__node::before, .partner-hub__row .partner-hub__node::after { content: ""; position: absolute; top: 0; height: 20px; width: 50%; background: none; border-top: 1px solid var(--cc-line-strong); }
  .partner-hub__row .partner-hub__node::before { right: 50%; border-right: 1px solid var(--cc-line-strong); }
  .partner-hub__row .partner-hub__node::after { left: 50%; }
  .partner-hub__row .partner-hub__node:first-child::before { border-color: transparent; }
  .partner-hub__row .partner-hub__node:last-child::after { border-color: transparent; }
  .partner-hub__row .partner-hub__node:only-child::before, .partner-hub__row .partner-hub__node:only-child::after { display: none; }
  .partner-hub__node--chip { display: flex; align-items: center; justify-content: center; }
}