/* ============================================================================
   marketing-employer.css — THE EMPLOYER HOMEPAGE (`/employers`), P3-07, plan item 3.2.
   Rulings E + W: the page is the approved "Become an Employer" frame (the dark navy one).
   Linked by `app/(marketing)/employers/page.tsx` only, and EVERY rule is scoped under
   `.emp-home`, a class exactly one route renders — so no other page can move (contract
   check 11). Additive sibling sheet: the pinned marketing.css already carries the frame's
   hero, card and `.wm-emp` ground; these rules only lift three site-wide interim rules
   that would otherwise stop the frame rendering here.
   ============================================================================ */

/* (1) FULL BLEED. The frame's hero spans its page edge to edge (`.mkt-hero{margin:0}` in a
   page that IS the viewport). The site boxes every `.page.mkt` at 1200px (marketing.css:356)
   and CMS heroes sit inset inside that; measured before this sheet on :4300 at 1440:
   hero x 186 w 1066. `.mkt-hero--frame` (marketing-cms.css:918) already zeroes the inset;
   this lets the page itself fill the viewport. (0,3,0) beats (0,2,0). */
.page.mkt.emp-home { width: 100%; max-width: 100%; margin: 0; }

/* (2) THE EMPLOYER ARROW FIELD. The pinned frame rule paints `var(--wm-img)` at
   `var(--wm-op)` — for `.wm-emp` the navy-on-navy wm-arrow-emp.svg at .28 (marketing.css:
   594/600). An interim site-wide rule (marketing-cms.css, `.page.fin.mkt section.mkt-hero::
   before`, (0,4,2)) forces the LR-blue "hi" tile at .18 on every hero, which paints light-blue
   arrows on this navy ground. The frame's own values are restored here, for this page only. */
.page.fin.mkt.wm-emp.emp-home section.mkt-hero::before {
  background-image: var(--wm-img);
  opacity: var(--wm-op, .28);
}

/* (3) THE LEAD SITS UNDER THE HEADLINE. The frame's lead starts at the h1's left edge
   (measured in the frame at 1440: h1 x 118, p x 118, margin-left 0). `.mkt .mkt-hwrap p
   {margin-inline:auto}` (marketing-alignment.css:59) centres a narrow p for the one-column
   CMS heroes; in this two-column hero it pushed the 44ch lead 14px in from the h1. */
.page.emp-home .mkt-hero .mkt-hcopy p { margin-inline: 0; }

/* (4) THE CARD'S "Become an employer" IS THE BLUE FILL. The frame computes it rgb(26,82,196)
   on white text (measured in the frame at 1440). `.mkt-hero .btn-solid{background:#fff}`
   (marketing-cms.css:856) is meant for the white-on-blue hero buttons and also reaches the
   card, turning its primary action white. (0,5,0) beats it and stays BELOW the pinned
   two-state hover `.page.fin.mkt .mkt-signup .btn-solid.wide:hover` (0,7,0), so the frame's
   hover inversion to white still fires. */
.page.emp-home .mkt-signup .btn-solid.wide { background: var(--cta-fill); color: #fff; }

/* (5) THE EMAIL ROW. The frame draws `.mkt-inp` as a styled <div> (Become an Employer.html:
   304 + 721); here it is a real `<input type=email>` in a GET form to the sign-up funnel, so
   the frame's block box, border, radius, padding and type size are applied to the control,
   and the UA's inline-block/1px/system-font defaults are removed. The placeholder takes the
   frame's `--mut` ink, which is what the frame's div text was. */
.page.emp-home .mkt-signup .emp-signup-form { margin: 0; }
.page.emp-home .mkt-signup input.mkt-inp {
  display: block; width: 100%; box-sizing: border-box; margin: 0 0 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-tile); padding: 13px 15px;
  background: #fff; color: var(--ink); font: inherit; font-size: 14.5px; line-height: normal;
}
.page.emp-home .mkt-signup input.mkt-inp::placeholder { color: var(--mut); opacity: 1; }
/* The same focus ring the card's Google button carries (marketing-interaction.css:239) —
   taken from the sibling, not minted. */
.page.emp-home .mkt-signup input.mkt-inp:focus-visible { outline: 2px solid #1A52C4; outline-offset: 2px; }
/* A form <button> does not inherit the anchor `.btn`'s block width; the frame's `.wide` is 100%. */
.page.emp-home .mkt-signup button.wide { width: 100%; justify-content: center; }

/* ============================================================================
   P3-08 — SECTIONS 2 AND 3 OF THE FRAME: the stats band and the node diagram.
   Rulings E (the frame) and AD(2) (the numbers are About's count-up band, same
   design) + AD(4) (P10 designs the phone/tablet layouts; no approved mobile frame).
   Every rule is scoped under `.emp-home` (one route), so /about — which shares
   `StatsBand` and `marketing-cms.css` — cannot move.
   ============================================================================ */

/* (6) THE STATS ROW SITS IN THE FRAME'S SECTION. The tiles are About's `.cms-stats`
   (type, dividers, ink numeral + brand suffix all untouched); only its box changes.
   About's row carries 58px/170px padding because on /about it IS the section; here
   the frame's `.mkt-stats` already carries the gutters (48px, 20px under 1280), so the
   row takes none at the sides — the frame's `.mkt-srow` spans its whole section — and
   the frame's 30px sub-to-figures gap is the `.mkt-ssub`'s own bottom margin.
   (0,3,0) beats every `.cms-stats` rule (0,1,0) at every width, including the phone
   one-row block (marketing-cms.css, P3-02b), whose 4 tracks and 6px gap still apply. */
.page.emp-home .mkt-stats > .cms-stats { padding: 0 0 40px; }

/* (7) THE FRAME'S WIRE COLOUR. `Become an Employer.html` draws the wires
   `stroke:#77A0F8` (the dots stay #2164F4, marketing-cms.css `path.wdot`). The
   site-wide employer block withheld the colour for the CMS pages (marketing-cms.css,
   CF-18 note); this page is the frame itself (ruling E), so it takes it here only.
   `:not(.wdot)` leaves the end dots on their own rule. */
.page.emp-home .mkt-node-wires path:not(.wdot) { stroke: #77A0F8; }
/* ...and THE 16 END DOTS ACTUALLY PAINT. `.mkt-node-wires path.wdot{stroke-width:7}`
   (marketing-cms.css) is (0,2,1); the employer geometry rule `.page.fin.mkt.portal-employer
   .mkt-node-wires path{stroke-width:1.1}` (0,5,1) beats it and shrinks every dot to a
   1.1px speck — measured by injecting this page's markup on :4300 at 1440: 16 of 16 dots
   invisible in the screenshot, while the frame draws 16 visible dots. The frame's 7px is
   restored at (0,7,1). */
.page.fin.mkt.portal-employer.emp-home .mkt-node-wires path.wdot { stroke-width: 7; }

/* THE SLAB'S WORDMARK. The frame's asset (`/mocks/assets/wordmark-white.png`, 162x40
   RGBA) is not served by this app, and `/design/logo-liverec-white.png` — what the CMS
   `NodeBand` points at — is RGB with NO alpha, so it paints a black box on the navy slab
   (seen on the injected render). `EmployerNode` uses `/design/logo-liverec-white.svg`, the
   same white mark with a transparent ground; its viewBox is cropped to the glyph where the
   frame's PNG is padded, so the frame's 26px-high image is matched by the GLYPH it shows:
   143x26 px of glyph in the 162x40 file (alpha bbox, measured) = 93px wide at 26px high. */
.page.emp-home .mkt-node-wm { height: auto; width: 93px; }

/* (8) THE NODE DIAGRAM BELOW 1024px — AD(4), NO FRAME. The desktop diagram is three
   columns (24.8% | core | 24.8%) whose wires are drawn in % of the grid box; at tablet
   width the cards fall to ~190px and on a phone to ~90px, too narrow for a two-line
   title, and the wires would join nothing. So below 1024: the LiveRec slab leads as
   the hub (order -1, centred), the wires are withheld, and the eight cards follow —
   two columns (left four | right four, the frame's own split) on a tablet, one column
   on a phone. On one column every card reads icon-then-title (the right cards' frame
   order), so the stack does not zig-zag. Selectors carry the employer root classes
   because the geometry they replace is `.page.fin.mkt.portal-employer ...` (0,5,0). */
@media (max-width: 1279.98px) {
  .page.emp-home .mkt-node > h2 { font-size: 26px; }
}
@media (max-width: 1023.98px) {
  .page.fin.mkt.portal-employer.emp-home .mkt-node-grid {
    grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; margin-top: 32px; align-items: start;
  }
  .page.fin.mkt.portal-employer.emp-home .mkt-node-wires { display: none; }
  .page.fin.mkt.portal-employer.emp-home .mkt-node-core {
    order: -1; grid-column: 1 / -1; width: 104px; height: 104px; margin-bottom: 8px;
  }
  /* the glyph keeps the desktop ratio to its slab: 93/132 of 104 = 73px */
  .page.emp-home .mkt-node-wm { width: 73px; }
  .page.fin.mkt.portal-employer.emp-home .mkt-node-col { gap: 16px; align-content: start; }
}
@media (max-width: 599.98px) {
  .page.fin.mkt.portal-employer.emp-home .mkt-node { padding: 48px 20px; }
  .page.fin.mkt.portal-employer.emp-home .mkt-node-grid { grid-template-columns: 1fr; gap: 12px; }
  .page.fin.mkt.portal-employer.emp-home .mkt-node-col { gap: 12px; }
  .page.fin.mkt.portal-employer.emp-home .mkt-node-card.left .mkt-node-hd {
    flex-direction: row-reverse; justify-content: flex-end;
  }
}

/* ============================================================================
   P3-11 — THE PHONE AND TABLET LAYOUTS OF THE WHOLE PAGE. Ruling AD(4): no approved
   mobile/tablet frame exists, so P10 designs them, following docs/rules/MOBILE.md (MW-03:
   body text >= 16px, form fields >= 16px or iOS zooms on focus, taps >= 44x44, no
   horizontal scroll, never hide overflow to pass). EVERY rule sits inside a
   max-width: 1279.98px block (or narrower), so 1440 and 1920 cannot move — the desktop
   stays the frame's type (14.5 / 15 / 14px) exactly.
   Measured on :4300 (build YSS2MdZuL5CSJUODVo7aT) before this block, mobile+touch contexts
   at 320/390/768/1024: 5 body texts under 16px at every width (3 `.mkt-quote` 14.5px from
   marketing.css:410, `.mkt-ctasub` 15px from :417, `.mkt-a` 14px); the hero pair wrapped to
   two lines (63px tall) at 320 and 390 and the card's Google button at 320; the sign-up card
   ran edge to edge on a tablet (728px at 768, 984px at 1024; 451px at 1440).
   ============================================================================ */
@media (max-width: 1279.98px) {
  /* (9) BODY TEXT AT 16px. The three sub-16 texts on this page take MW-03's floor; their
     line-heights are unitless (1.6 / 1.55 / 1.6) so the rhythm scales with them. The
     `.mkt-quote` min-height (96px, sized for 14.5px quotes on desktop) is already 0 below
     the site's tablet break (marketing-responsive.css:245). (0,3,0) beats each (0,1,0)/(0,2,0)
     source. The legal line `.mkt-terms` is small print and keeps its size. */
  .page.emp-home .mkt-testi .mkt-quote,
  .page.emp-home .mkt-ctaband .mkt-ctasub,
  .page.emp-home .mkt-faqitem .mkt-a { font-size: 16px; }
  /* The email field at 16px: below 16, iOS Safari zooms the page when it takes focus
     (MOBILE.md, "Form fields render text at 16px or larger"). */
  .page.emp-home .mkt-signup input.mkt-inp { font-size: 16px; }

  /* (10) THE TABLET SIGN-UP CARD. Below 1280 the hero is one column (copy, then card), and
     the card took the whole column: a 924px-wide Google button at 1024. It is held to 560px —
     the desktop card is 451px, and 560 keeps the card's three full-width controls a
     comfortable reach wide on a portrait tablet. It is CENTRED in the column: ruling
     operator-2026-09-25-SIGNUP-CENTRE (18:51, his ~720px shot: "This one is not centered;
     it's to the left" — the card ran x≈85→609 inside a 720 banner). Measured before (P2-15
     lead probe, :4300): with `justify-self: start` the card sat 84–250px left of the
     column's centre at 768–1279 (-212px at 1024). `center` is direction-neutral, so /ar
     centres the same way; the h1, lead and buttons above stay left-set (only the card
     moves). On a phone the column is narrower than 560, so the card still fills it and
     nothing moves. NO FRAME (no approved tablet frame, ruling AD(4)). */
  .page.emp-home .mkt-hero .mkt-signup { width: 100%; max-width: 560px; justify-self: center; box-sizing: border-box; }
}
@media (max-width: 599.98px) {
  /* (11) THE HERO PAIR STACKS ON A PHONE. Side by side, "Become an employer" (216px at one
     line) + "Get Started" (142px) + the 12px gap need 370px; a 390 phone's column is 350, so
     both wrapped to two lines. Stacked, each button spans the column on one line — 280px at
     320, the narrowest phone, still clears the 216px label — at the site's 46px height, and
     the pair reads as primary-then-secondary top to bottom. The labels do not change. */
  .page.emp-home .mkt-hero .mkt-hbtns { flex-direction: column; align-items: stretch; }
  .page.emp-home .mkt-hero .mkt-hbtns > .btn { width: 100%; justify-content: center; white-space: nowrap; }
  /* The card's side padding 30 -> 20px, the same 20px gutter the page uses on a phone, so
     "Continue with Google" (icon + label, ~193px + 26px padding) fits one line in the card at
     320 (it wrapped at 220px; now 240px). The Google button keeps its label on one line. */
  .page.emp-home .mkt-hero .mkt-signup { padding: 24px 20px; }
  .page.emp-home .mkt-hero .mkt-signup .btn-google { white-space: nowrap; }
}

/* (P3-10b) THE FAQ ANSWER'S ONE LINK — "privacy policy" in "How secure is my company and job
   data?". No rule reached an `a` inside `.mkt-a`, so it rendered the browser's default link
   (measured on :4300 at 1440: color rgb(0,0,238), underline, inside a rgb(110,110,115) answer).
   Nothing is minted (S13): the value is the site's own inline-link-in-muted-prose treatment,
   `.page .acctcard .sub a` (marketing-interaction.css:712 colour, :1003 underline + offset).
   (0,4,1) under `.emp-home`, so no other page can move. */
.page.emp-home .mkt-faq .mkt-a a { color: var(--cta-fill); text-decoration: underline; text-underline-offset: 2px; }

/* (9) P2-12b — THE HERO'S CORNERS ARE SQUARE, AT EVERY WIDTH (operator-2026-09-25-NOTCH-EMPLOYER-UNDO,
   12:20 "since they dont have a cut out the mobiel and tablet views dont have it either"; 12:23 "make sure
   the corners arent rounded either for desktop view on the main banners for eployer and live recruiter
   homepage"). FRAME: `Become an Employer.html` draws `section.mkt-hero` with NO radius and NO notch.
   MEASURED BEFORE (:4300, lead-probe/before.txt, BUILD -iPpNyDUL0hVGHNyxX8tH): radius TL/TR/BR/BL
   0/24/0/24px at 1920, 1440, 1280, 768, 390, 360 (6/6). S14 — the one winning source, grepped over every
   sheet in public/design: marketing-cms.css `.page .mkt-hero{border-top-right-radius / border-bottom-left-
   radius: calc(var(--r-card) + 6px)}` (0,2,0), meant for the NOTCHED CMS heroes (it rounds the uncut pair).
   Its RTL twin (0,3,0) cannot reach this page (/ar/employers 308s) but (0,3,1) beats it anyway. The
   P2-12 cut-outs themselves are gone from EmployerHero.tsx, so the notch polygon
   (`.page .mkt-hero:has(> .cms-notch)`) no longer matches and clip-path falls back to none on its own.
   Every other page's hero keeps its rounding: this rule is under `.emp-home`. */
.page.emp-home section.mkt-hero { border-radius: 0; }

/* (12) P3-10c — THE CARDS MOVE LIKE THE HOMEPAGE'S (operator-2026-09-25-EMP-CARD-ANIM, 12:22: "for employers
   home page can you give the cards the same animations as the marketing homepage?"). A frame-built page, but the
   operator asked for the addition explicitly. S13, nothing minted: every value below is the homepage card's own,
   `.sell .si` / `.jgrid .acc` in marketing-motion.css (W-04: "transition: border-color .2s ease, box-shadow .2s
   ease"; ":hover { border-color: var(--brand); box-shadow: var(--sh-card) }"; reduced motion "transition: none").
   MEASURED on :4300 before this block (lead, autorun/runs/P3-10c/lead/rules.txt): /employers had 0 hover rules on
   any card, and its three card types rest exactly as the homepage's (1px var(--line) border, var(--card) ground;
   the tcard and node card also carry `--sh-soft` like `.si`; the why item carries no shadow and keeps none at rest).
   The 15 cards: 4 `.mkt-witem` (why), 3 `.mkt-tcard` (testimonials), 8 `.mkt-node-card` (diagram). Not here:
   the stats tiles (the homepage's `.tile` has no effect to copy) and the steps (P3-09b owns their motion).
   The homepage's other card effects (text that expands, a turning chevron, a linked scene) have no counterpart
   structure on these cards, so they are not carried over.
   ⚠ HOVER ONLY WHERE A POINTER HOVERS. A phone's tap leaves the tapped card matching `:hover` until the next tap
   elsewhere (measured with a touch context: 45/45 tapped cards still `:hover` 300 ms later), so the lit state sits
   in `@media (hover: hover)` — a touch screen reads `hover: none` and never reaches it (same intent as CursorGlow
   ignoring touch pointers, P2-05).
   ⚠ SCOPE. `.mkt-witem/.mkt-tcard/.mkt-node-card` are also drawn by /recruiter (frames/**) and the CMS
   ArticleView; every selector carries `.emp-home`, a class one route renders, so neither can move. */
.page.fin.mkt.portal-employer.emp-home .emp-why .mkt-witem,
.page.fin.mkt.portal-employer.emp-home .emp-testi .mkt-tcard,
.page.fin.mkt.portal-employer.emp-home .emp-node .mkt-node-card { transition: border-color .2s ease, box-shadow .2s ease; }
@media (hover: hover) {
  .page.fin.mkt.portal-employer.emp-home .emp-why .mkt-witem:hover,
  .page.fin.mkt.portal-employer.emp-home .emp-testi .mkt-tcard:hover,
  .page.fin.mkt.portal-employer.emp-home .emp-node .mkt-node-card:hover { border-color: var(--brand); box-shadow: var(--sh-card); }
}
@media (prefers-reduced-motion: reduce) {
  .page.fin.mkt.portal-employer.emp-home .emp-why .mkt-witem,
  .page.fin.mkt.portal-employer.emp-home .emp-testi .mkt-tcard,
  .page.fin.mkt.portal-employer.emp-home .emp-node .mkt-node-card { transition: none; }
}
/* THE POINTER GLOW ON "Why employers choose to hire with us" — the homepage's journeys cards sit in a section that
   hosts the frame's `.jglow` (ruling J, P2-05), and this is the employer card list that matches them (an icon list
   beside a heading column). `EmployerWhy` renders `<CursorGlow />` as the section's direct child; the pinned
   `.jglow` (marketing.css:152) is `position:absolute; inset:0`, so the section must be its containing block —
   measured `position: static` before. Positioning it moves nothing (no offsets; measured with the layer injected:
   layer box = section box 1440x518.5 at 1440, 0 descendants outside it). Overflow is left visible so a hovered
   card's shadow is never cut; the glow paints only inside its own box, so it needs no clip. */
.page.fin.mkt.portal-employer.emp-home section.emp-why { position: relative; }

/* (13) P3-09b/P3-09d — "RECRUITING MADE EASY": CENTRED (P3-09b, operator-2026-09-25-EMP-STEPS-SCROLL), AND THE
   PINNED STEP-BY-STEP REVEAL, RESTORED (P3-09d, operator-2026-09-28-STEPS-PINNED: "Bring back the pinned one", over
   P3-09c's pop-in), pinned at its natural spot. The behaviour and its reasons live in `EmployerStepsMotion.tsx`; this
   is its paint.
   CENTRING — the frame's grid is box-centred, but its text is ragged-right, so step 04's longest line ends ~39px short
   of its column while step 01's chip sits on its edge (measured on :4300 at 1920/1440/1280: 502px vs 463.4px from the
   heading's centre, lead/today.txt). The four columns stay equal and the text stays left-set, as drawn; the whole
   grid moves right by half the imbalance. 19.3px is that measurement, so the server render (and a visitor without
   JavaScript) is already centred; the script refines it on the real ink and sets 0 whenever the steps are not one row.
   `translate` moves paint only: nothing around the grid reflows.
   ⭐ KEYED ON THE COMPONENT, NOT THE PAGE (SR-01, operator-2026-09-28-RECRUITER-STEPS-SAME-AS-EMPLOYERS: "can we make
   sure the one on live recruiters functions the same as the one on live employers?"). Every rule of this block but one
   hangs off `.page.mkt.fin .emp-steps-track` — the wrapper `EmployerStepsMotion` renders, under any marketing root
   (/recruiter's `page mkt portal-recruiter … fin`, /affiliates') — and the component links this sheet itself, so any
   page that mounts it pins and reveals exactly as /employers does. The ONE rule left under `.emp-home` was the 19.3px
   default (retired to 0px by ST-30, block 13b below): it is a measurement of /employers' own text, not a property of the motion (another page starts at 0px and
   the script measures its real ink). On /employers nothing moves: these rules match the same elements, nothing else
   there competes for these properties (grepped over public/design: the only other `.mkt-step` opacity/transform
   rules are `.portal-affiliate`'s), and their order and relative weight among themselves are unchanged. */
.page.mkt.fin .emp-steps-track > .emp-steps .mkt-sgrid { translate: var(--emp-steps-nudge, 0px) 0; }
/* (13b) ST-30 (operator walk 2026-10-01, PDF p19: "the 4 parts arent centered with the header and body for the same
   section, animation works clean"). MEASURED (operator crop st-019-051.png, by eye, no browser this pass): the text
   ink WAS balanced (body 153..~1690 display px, centre ~921 = heading ink centre 921.5) — the 19.3px nudge did its
   job — but the chip + connector row ran 153..1448, centre ~800: ~121 display px left of the heading axis, an empty
   band right of 04. The eye reads that row, not the ragged text edge. So the steps' CONTENT is centred in each equal
   column, as the site's other "Recruiting made easy" already is (/recruiter, marketing-cms.css:1122 `.mkt-snum2{margin:
   0 auto 14px}` and :1148 `.mkt-step{text-align:center}`) — S13, the value is the sibling's, nothing minted. With
   centred columns the row is symmetric in its own box, so the left-set 19.3px default is retired (0px), and the
   script now balances the CHIPS, not the ragged text (EmployerStepsMotion `centre()`). Connectors are measured from
   the chips' layout, so they follow; the reveal order and timing are untouched. /employers + its locale twins
   (`.emp-home` root, both mounts of EmployerHome). FRAME: Employer/Home and Pricing/Become an Employer left-sets the
   step text — INTERIM DEVIATION · UNRATIFIED (the walk is full authority, ST-1001 s13). Row ST-30. */
.page.fin.mkt.portal-employer.emp-home .emp-steps .mkt-sgrid { --emp-steps-nudge: 0px; }
.page.fin.mkt.portal-employer.emp-home .emp-steps .mkt-step { text-align: center; }
.page.fin.mkt.portal-employer.emp-home .emp-steps .mkt-snum2 { margin-inline: auto; }
/* THE SEQUENCE — every rule below needs `[data-seq]`, which only the script sets, so with JavaScript off, reduced
   motion or data saver none of it matches and every step shows at rest at the static length. PIN: the section sticks
   at `--emp-steps-top` — the nav's height plus the 10px the static layout already leaves above it (operator 07:57:
   "right after the section before … more so where it was originally"), NOT centred — and a spacer after it gives
   the reader `--emp-steps-track` of native scroll to travel through while it holds. S13, nothing minted: the entrance
   is the site's other "Recruiting made easy" sequence (/recruiter, recruiter-marketing.css `.mkt-sgrid.seq` parts)
   verbatim — translateY(16px) scale(.92), opacity .45s ease, transform .45s cubic-bezier(.2,.8,.3,1.2). The heading
   and its sub-heading are NOT held back (07:57: "the header and body to stay there before the animation"). A hidden
   part is only transparent and risen: it keeps its box, its text and its place in the accessibility tree.
   `position: relative` on the step gives the script each part's un-risen top and the line its box; it moves nothing. */
.page.mkt.fin .emp-steps-track[data-seq="pin"] > .emp-steps { position: sticky; top: var(--emp-steps-top, 0px); }
.page.mkt.fin .emp-steps-track[data-seq="pin"]::after { content: ""; display: block; height: var(--emp-steps-track, 0px); }
.page.mkt.fin .emp-steps-track[data-seq] .mkt-step { position: relative; }
.page.mkt.fin .emp-steps-track[data-seq] .mkt-step > :is(.mkt-snum2, h3, p) {
  opacity: 0; transform: translateY(16px) scale(.92);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.3,1.2);
}
.page.mkt.fin .emp-steps-track[data-seq] .mkt-step > .s-in { opacity: 1; transform: none; }
/* THE CONNECTOR — /recruiter's line from each numeral to the next (recruiter-marketing.css `.mkt-step+.mkt-step::before`:
   2px, var(--tint2), scaleX 0 -> 1 over .45s ease), drawn after a step's text and before the next numeral. Only while
   pinned and one row (`[data-line]`, set by the script); its box (`--emp-line-*`) is measured by the script from the
   chips' layout, so it sits on the chip's centre line and grows away from chip k toward chip k+1 (leftward in RTL).
   Absolutely positioned, so no other box moves. */
.page.mkt.fin .emp-steps-track[data-line] .mkt-step:not(:last-child)::after {
  content: ""; position: absolute; left: var(--emp-line-x, 0px); top: var(--emp-line-y, 22px);
  width: var(--emp-line-w, 0px); height: 2px; background: var(--tint2); pointer-events: none;
  transform: scaleX(0); transform-origin: var(--emp-line-from, left) center; transition: transform .45s ease;
}
.page.mkt.fin .emp-steps-track[data-line] .mkt-step.s-line::after { transform: scaleX(1); }
/* the first arm takes its starting state without animating into it */
.page.mkt.fin .emp-steps-track[data-seq-init] .mkt-step > :is(.mkt-snum2, h3, p),
.page.mkt.fin .emp-steps-track[data-seq-init] .mkt-step::after { transition: none; }
/* Belt and braces: should a preference change before the script hears of it, the steps still show at rest and no
   line is drawn. */
@media (prefers-reduced-motion: reduce) {
  .page.mkt.fin .emp-steps-track[data-seq] .mkt-step > :is(.mkt-snum2, h3, p) { opacity: 1; transform: none; transition: none; }
  .page.mkt.fin .emp-steps-track[data-line] .mkt-step::after { display: none; }
}
html[data-saver="on"] .page.mkt.fin .emp-steps-track[data-seq] .mkt-step > :is(.mkt-snum2, h3, p) { opacity: 1; transform: none; transition: none; }
html[data-saver="on"] .page.mkt.fin .emp-steps-track[data-line] .mkt-step::after { display: none; }

/* ST-29 (operator walk 2026-10-01, p20 + p16) — THE PORTAL FOOTER TAKES THE PORTAL'S COLOUR. COLOUR ONLY: no box
   moves (ST-17 owns the footer's layout, after the operator's pick).
   Operator, p20: "a hard rule for all footer for the portal pages ... not the main marketing home page ... since the
   color for liv employers is navy blue, the footer should be navy blue, and for the arrow watermark ... match with
   the left nav in the portal arrow watermark."
   MEASURED (source, not browser — browsers were forbidden this pass): the footer is the SiteChrome footer, a SIBLING
   of `<main>` inside the chrome's `.page.fin` wrapper, so `.emp-home` (inside main) cannot be its ancestor; the rule
   keys on the wrapper that CONTAINS this page's root (`:has`), which only /employers and its five locale twins
   render. Today `.page.fin .p-foot{background:#2164F4}` (marketing.css:698) paints it LR blue and the arrow is
   white footer-arrow.png at .14 (marketing-alignment.css, >= 1200 px).
   FRAME: `Become an Employer` — its own `.page.fin .p-foot{background:#0E1746}`, named as withheld in
   marketing-cms.css CF-18; #0E1746 is also this page's hero ground (`.page.wm-emp{--wm-bg}`, marketing.css:600).
   ARROW: the employer portal rail's own watermark colour `.rail.emp .rail-wm{background:#172888}`
   (design-system.css:169, founder-ruled 2026-07-09), painted through the SAME footer-arrow.png used as a mask
   (its alpha is the arrow; its RGB is plain white, decoded), at full strength as the rail draws it. Contrast
   #172888 on #0E1746 = 1.379:1 (rail: 1.552:1; today's white .14 on blue: 1.272:1) — tone-on-tone, not invisible.
   Footer ink stays white: 17.08:1 on #0E1746. Position, size and the < 1200 px hide are untouched.
   §9b: literals only, no var(). Row: queue ST-29. INTERIM DEVIATION · UNRATIFIED (the home-row footer is LR blue). */
.page.fin:has(> main .page.emp-home) > .p-foot { background: #0E1746; }
.page.fin:has(> main .page.emp-home) > .p-foot .watermark {
  background: #172888;
  -webkit-mask: url(/mocks/assets/footer-arrow.png) left bottom/contain no-repeat;
          mask: url(/mocks/assets/footer-arrow.png) left bottom/contain no-repeat;
  opacity: 1;
}

/* ST-72 (2026-10-02, founder's own pick of OPTION D on the options page autorun/runs/ST-1001/design-options/employers-sections/index.html):
   "Why employers choose to hire with us" and the node diagram above it were one joined band of the same tint (--tint #E3ECFE on both,
   the 10 px gap between them zeroed since 2026-08-30, CF-18); measured unchanged in every full-page capture since the section was
   built on 2026-09-24 (autorun/runs/ST-1001/design-options/employers-sections/index.html, first box). OPTION D: the why-section takes
   the site's lighter panel blue (#EEF3FF = --tint-panel) with a fine line (#C9D7F5) on top, so the two stay related but read as two
   sections. COLOUR AND ONE BORDER ONLY: no box, padding, text, card or wire changes. Scope: the employer home root (`.emp-home`) and
   its locale twins. §9b: literals, no var(). */
.page.fin.mkt.portal-employer.emp-home section.emp-why { background: #EEF3FF; border-top: 1px solid #C9D7F5; }

/* ST-78 (founder 2026-10-03, two asks on "Why employers choose to hire with us").
   (1) "the same line along its bottom edge": ST-72's top line (the rule just above: 1px solid #C9D7F5 on the section
   box, which spans the viewport because the page fills it) is repeated on the bottom edge. Same colour literal, same
   width, same box — nothing new minted. §9b: literal, no var().
   (2) "I want this section to be designed like this" (his screenshot of /affiliates' "Partner with a platform built
   for affiliate success"): the four cards take the affiliate feature-card design. TAKEN FROM THE NEIGHBOUR, NOTHING
   MINTED — every value below is read from marketing-affiliates.css band 3 (`.aff-feat`, `.mkt-fgrid`, `.mkt-fcard`,
   `.aff-ico`, `.aff-feat-accent`, ST-68's heading sizes) or from the pinned `.mkt-fcard` box it wears
   (marketing.css:380 `background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
   box-shadow:var(--sh-soft)`; `.mkt-fcard p` :393 13.5px / var(--mut) / 1.5). The affiliate classes are not reused
   as-is: their rules sit under `.aff-home` in a sheet this page does not link, and putting `.mkt-fcard` on these
   cards would also pull in that class's site-wide 2px hover lift (marketing-motion.css) — the employer cards keep
   their own hover (block 12: border + shadow, no lift), so no animation changes.
   §9b token scope: --brand/--mut on `.page` (marketing.css:685); --card/--line/--r-card/--sh-soft on `.tok-iter3`,
   which is on this page's root (EmployerHome.tsx `page mkt portal-employer tok-iter3 fin wm-emp emp-home`) exactly as
   on /affiliates' — so they resolve to the same values on both pages.
   Specificity: (0,7,0)/(0,7,1) beats the pinned `.mkt-wwrap/.mkt-wlist/.mkt-witem` (0,1,0), `.mkt-why h2` (0,1,1)
   and marketing-responsive.css's (0,1,0) one-column rules; block 12's hover `…mkt-witem:hover` is (0,8,0) and still
   wins for border-colour and shadow. Scope: `.emp-home` (/employers + its five locale twins) only; /recruiter's and
   the CMS's `.mkt-witem` cannot match. Breakpoints are the affiliate band's: >= 1024 heading left + staggered grid;
   <= 1023.98 heading above, cards two by two; <= 599.98 one column. INTERIM DEVIATION from the frame's chip card,
   founder-asked. Row ST-78. */
.page.fin.mkt.portal-employer.emp-home section.emp-why { border-bottom: 1px solid #C9D7F5; }
.page.fin.mkt.portal-employer.emp-home .emp-why .mkt-wwrap {
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 48px; align-items: start;
  padding-top: 72px; padding-bottom: 72px;
}
.page.fin.mkt.portal-employer.emp-home .emp-why .mkt-wwrap h2 { text-align: start; font-size: 38px; line-height: 1.12; max-width: none; }
.page.fin.mkt.portal-employer.emp-home .emp-why .emp-why-accent { color: var(--brand); }
.page.fin.mkt.portal-employer.emp-home .emp-why .mkt-wlist { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 20px; }
.page.fin.mkt.portal-employer.emp-home .emp-why .mkt-witem {
  display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--sh-soft); padding: 24px;
}
.page.fin.mkt.portal-employer.emp-home .emp-why .mkt-witem:nth-child(1) { grid-column: 1 / 5; }
.page.fin.mkt.portal-employer.emp-home .emp-why .mkt-witem:nth-child(2) { grid-column: 5 / 8; }
.page.fin.mkt.portal-employer.emp-home .emp-why .mkt-witem:nth-child(3) { grid-column: 1 / 4; }
.page.fin.mkt.portal-employer.emp-home .emp-why .mkt-witem:nth-child(4) { grid-column: 4 / 8; }
.page.fin.mkt.portal-employer.emp-home .emp-why .emp-why-ico { display: inline-flex; color: var(--brand); line-height: 0; }
.page.fin.mkt.portal-employer.emp-home .emp-why .mkt-witem h3 { font-size: 19px; margin: 18px 0 8px; }
.page.fin.mkt.portal-employer.emp-home .emp-why .mkt-witem p { font-size: 13.5px; color: var(--mut); line-height: 1.5; }
@media (min-width: 1024px) {
  .page.fin.mkt.portal-employer.emp-home .emp-why .mkt-wwrap h2 { font-size: 52px; line-height: 1.08; overflow-wrap: break-word; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .page.fin.mkt.portal-employer.emp-home .emp-why .mkt-wwrap h2 { font-size: 44px; }
}
@media (max-width: 1279.98px) {
  /* MOBILE.md body text >= 16px below the desktop, as the affiliate cards do (`.page.aff-home .mkt-fcard p`). */
  .page.fin.mkt.portal-employer.emp-home .emp-why .mkt-witem p { font-size: 16px; }
}
@media (max-width: 1023.98px) {
  .page.fin.mkt.portal-employer.emp-home .emp-why .mkt-wwrap { grid-template-columns: 1fr; gap: 28px; }
  .page.fin.mkt.portal-employer.emp-home .emp-why .mkt-wwrap h2 { font-size: 32px; }
  .page.fin.mkt.portal-employer.emp-home .emp-why .mkt-wlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .page.fin.mkt.portal-employer.emp-home .emp-why .mkt-witem:nth-child(n) { grid-column: auto; }
}
@media (max-width: 599.98px) {
  .page.fin.mkt.portal-employer.emp-home .emp-why .mkt-wwrap { padding-top: 48px; padding-bottom: 48px; }
  .page.fin.mkt.portal-employer.emp-home .emp-why .mkt-wlist { grid-template-columns: 1fr; }
}