/* ── /career — Careers page ───────────────────────────────────────────────────
   Ported from Figma "Career Page" (file a2ii3fWanOKLjJdHXwNL81):
     hero 8139:2579 · how-we-hire 8142:2125 · job-card 8140:2789 ·
     hiring-process 8147:2125

   Scope: every rule here is prefixed `.cr-`, so this file only ever touches the
   careers page. It is linked by career.html alone — nothing else imports it.

   Fidelity: sizes, weights, line-heights, letter-spacings, radii, paddings and
   gaps are the export's literal values (letter-spacing kept in px so it matches
   Figma 1:1). Only the family changes — the export's Inter/Outfit resolve to the
   site's own --z-font (Satoshi) — and colours go through the page vars below so
   the page still themes with the toggle. In light mode those vars resolve to the
   export's exact hexes: --z-text IS #1F1E4D and --z-body IS #4B4A6C.
   Layout: widths follow the shared chrome, not the export. Header and footer are
   1370px cards with a fixed 30px inset; the page reuses that pair so its content
   column lines up with them (the export's column was 1290px). The per-section
   insets the export applies inside that column (64px on how-we-hire, 80px on
   hiring-process, 0 on the job list) are kept.
   ────────────────────────────────────────────────────────────────────────── */

.cr {
  /* the export tracks every style at 0 unless stated; body carries 0.001em
     site-wide, so it is reset once here and only the explicit values below
     (‑4.2px hero, ‑0.84px roles, ‑0.54px job title, 0.14px apply, ‑1px
     process) depart from it */
  letter-spacing: 0;

  --cr-shell: 1370px;

  /* export ink: #1F1E4D headings / #4B4A6C body — exactly what the light theme
     already resolves to, so the toggle keeps working for free */
  --cr-ink: var(--z-text);
  --cr-body: var(--z-body);
  /* export accent #146CF0 — not the site's --z-blue (#4D5FF8); the careers page
     is the one surface that carries the Figma blue */
  --cr-blue: #146cf0;
  /* the "HOW WE HIRE" kicker is its own warm grey in the export */
  --cr-kicker: #8c8882;
  /* card surface #FFFFFF + #E5E5E5 hairline */
  --cr-card-bg: var(--z-surface);
  --cr-card-line: #e5e5e5;
  /* job tag chip: #EAEFFF on #146CF0 */
  --cr-chip-bg: #eaefff;
  --cr-chip-ink: #146cf0;
}

html:not([data-theme="light"]) .cr {
  /* #146CF0 and #EAEFFF are light-ground values; on the near-black they are
     lifted just enough to hold contrast */
  --cr-blue: #4f97ff;
  --cr-card-line: var(--z-line-panel);
  --cr-chip-bg: rgba(77, 95, 248, 0.22);
  --cr-chip-ink: rgb(169, 180, 255);
}

/* Every band on the page sits on this, so they all line up with the header —
   not approximately, but on the two numbers the header pill itself is built
   from: capped at 1370px with a 16px outer margin below that cap
   (calc(100% - 32px), which is what .lf-hd__inner's own width resolves to).
   No inner padding: content runs to the pill's OUTER edge, so a block's left
   edge lands on the header card's left edge rather than 30px inside it, on the
   logo. Same for the footer card, which is the same 1370px box. */
.cr-shell {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: var(--cr-shell);
  margin: 0 auto;
  padding: 0;
}

/* ── hero (8139:2579) ──────────────────────────────────────────────────────
   Export: a 1920x702 banner — soft blue wash to the bottom edge, a faint line
   drawing top-left, six floating app tiles, one prism top-right. The tiles are
   pinned to the CENTRE line (design x minus 960) rather than to the viewport,
   so they keep their distance from the copy at any width. */
.cr-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 702px;
  padding: 120px 20px 60px;
}

/* The wash is light-mode only: on the dark ground the same gradient would read
   as a grey fog, so dark gets a blue/violet bloom instead. */
.cr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
      120% 90% at 50% 100%,
      rgba(77, 95, 248, 0.16) 0%,
      rgba(13, 13, 13, 0) 70%
    ),
    radial-gradient(
      70% 60% at 82% 18%,
      rgba(149, 39, 249, 0.14) 0%,
      rgba(13, 13, 13, 0) 70%
    );
}

html[data-theme="light"] .cr-hero::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(242, 246, 255, 0.8) 100%);
}

.cr-hero__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.cr-hero__deco img {
  position: absolute;
  max-width: none;
}

/* left: design x - 960 (the export's centre line) */
.cr-deco-line {
  left: calc(50% - 681px);
  top: 155px;
  width: 553px;
  height: 577px;
  opacity: 0.55;
}

html:not([data-theme="light"]) .cr-deco-line {
  opacity: 0.22;
}

/* Pinned like the tiles, but clamped so it never hangs half-off the right edge
   on viewports narrower than the export's 1920. */
.cr-deco-prism {
  left: min(calc(50% + 748px), calc(100% - 118px));
  top: 305px;
  width: 100px;
  height: 94px;
}

/* Five of the six tiles are a white rounded box with the glyph centred; the
   sixth (icon 4) is artwork that deliberately overflows its 80px frame. */
.cr-deco-tile {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 30px 0 rgba(200, 200, 200, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

html:not([data-theme="light"]) .cr-deco-tile {
  background: var(--z-raised);
  box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 1px var(--z-line-glass);
}

/* Both axes are set explicitly — an `auto` here would blow each glyph up to
   its intrinsic size. */
.cr-deco-tile img {
  position: static;
  width: 40px;
  height: 40px;
}

.cr-deco-tile--1 { left: calc(50% - 551px); top: 166px; }
.cr-deco-tile--9 { left: calc(50% - 697px); top: 376px; }
.cr-deco-tile--8 { left: calc(50% + 301px); top: 126px; }
.cr-deco-tile--7 { left: calc(50% + 554px); top: 365px; }
.cr-deco-tile--3 { left: calc(50% + 351px); top: 546px; }

/* ── hero entrance ─────────────────────────────────────────────────────────
   Motion copied from the source design's live build (azlytics.webflow.io/
   integration), measured frame by frame rather than eyeballed:

     eyebrow   opacity 0→1 + translateY 90px→0      starts  +0ms
     tiles     opacity 0→1 + scale 0.75→1           starts +20ms   (no rise)
     H1        opacity 0→1 + translateY 90px→0      starts +90ms
     paragraph opacity 0→1 + translateY 90px→0      starts +190ms
     buttons   no animation at all
     every one ~740ms; nothing loops, no hover, no mouse parallax

   Its easing is a JS lerp, not a bezier — the remaining distance halves every
   ~18% of the duration (pure exponential decay). cubic-bezier(0.16, 1, 0.3, 1)
   is the closest CSS curve and is what the two keyframes below use.

   Keyframes, not the site's shared [data-reveal] transition: that script runs
   before the first paint, so for anything already in the viewport the browser
   never computes the opacity:0 state and has no value to transition FROM —
   measured, the hero was at opacity 1 on frame one, i.e. no animation at all.
   (Below the fold [data-reveal] is fine: painted hidden, revealed on scroll.)
   An animation has no such dependency; it plays on load regardless. */
@keyframes cr-pop-in {
  from { opacity: 0; transform: scale(0.75); }
  to { opacity: 1; transform: none; }
}

@keyframes cr-rise-in {
  from { opacity: 0; transform: translateY(90px); }
  to { opacity: 1; transform: none; }
}

/* fill-mode is `backwards`, NOT `both`, and that matters: `both` keeps the
   `to` state applied forever, so the element is left carrying
   transform: matrix(1,0,0,1,0,0) permanently. An identity transform is still a
   transform — it promotes the element to its own composited layer, and
   background-clip: text inside a promoted layer is exactly the case where
   Chrome and Safari drop part of the clipped gradient (the H1's "AI Workforce"
   renders with its left half missing). `backwards` fills only BEFORE the
   animation — which is all that is needed, so a piece stays invisible through
   its delay instead of flashing in — and hands the element back to its own
   style afterwards, transform: none. */
.cr-hero__eyebrow,
.cr-hero__title,
.cr-hero__lede,
.cr-hero__deco > * {
  animation: cr-rise-in 0.74s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.cr-hero__title { animation-delay: 90ms; }
.cr-hero__lede { animation-delay: 190ms; }

/* The tiles pop rather than rise — that is the source's own split, and it is
   what keeps the floating art from reading as one more line of copy. */
.cr-hero__deco > * { animation-name: cr-pop-in; }

/* The one departure from the source: there all six tiles fire together. Here
   the start times are staggered so no two land at once (asked for explicitly).
   They are irregular ON PURPOSE and follow neither position nor DOM order — a
   tidy progression (top→bottom, or the index*90ms a [data-reveal-group]
   applies) reads as one sweep, which is the thing being avoided. Fixed rather
   than randomised per load, so the sequence is identical every visit and
   reviewable in a diff; visually it makes no difference, since nobody sees two
   loads at once. */
.cr-deco-line { animation-duration: 1s; }
.cr-deco-tile--8 { animation-delay: 120ms; }
.cr-deco-tile--3 { animation-delay: 200ms; }
.cr-deco-tile--1 { animation-delay: 260ms; }
.cr-deco-tile--7 { animation-delay: 380ms; }
.cr-deco-tile--9 { animation-delay: 520ms; }
.cr-deco-orb { animation-delay: 640ms; }
.cr-deco-prism { animation-delay: 760ms; }

/* The source leaves its buttons static; .cr-hero__cta is deliberately absent
   from the list above for the same reason. */

@media (prefers-reduced-motion: reduce) {
  .cr-hero__eyebrow,
  .cr-hero__title,
  .cr-hero__lede,
  .cr-hero__deco > * { animation: none; }
}

/* icon 4: 140x140 artwork on an 80x80 frame at 506,496 → -30 / -24 offsets */
.cr-deco-orb {
  left: calc(50% - 484px);
  top: 472px;
  width: 140px;
  height: 140px;
}

/* export: 954px text area, 40px between the head block, the standfirst and the
   button; 30px inside the head block */
.cr-hero__inner {
  position: relative;
  width: 100%;
  max-width: 954px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.cr-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}

.cr-hero__eyebrow {
  margin: 0;
  color: var(--cr-ink);
  font: 500 14px/16px var(--z-font);
  letter-spacing: 0;
  text-transform: uppercase;
}

/* export: Medium 60/70 at -4.2px. The tracking is what lets the first line hold
   the 954px measure on two lines — without it the head needs ~1020px. */
.cr-hero__title {
  margin: 0;
  color: var(--cr-ink);
  font: 500 60px/70px var(--z-font);
  letter-spacing: -4.2px;
  text-wrap: pretty;
}

/* export: linear-gradient(39.6deg, #FF6726 44.038%, #4563FF 69.318%) */
.cr-grad {
  background-image: linear-gradient(39.606deg, #ff6726 44.038%, #4563ff 69.318%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* The H1's -4.2px tracking is applied after the LAST glyph too, so the inline
     box ends 4.2px short while the "e" of "Workforce" still inks 2.04px past
     it (measured). background-clip: text paints only inside the background
     box, so that sliver gets no gradient and the letter looks sliced off.
     Padding widens the box; the matching negative margin cancels the layout
     effect, so the centred line does not shift. */
  padding-right: 4.2px;
  margin-right: -4.2px;
}

.cr-hero__lede {
  margin: 0;
  max-width: 554px;
  color: var(--cr-body);
  font: 400 16px/26px var(--z-font);
  letter-spacing: 0;
}

/* export btn: #146CF0, radius 5, 20/25 padding → 50px tall, Medium 15 */
.cr-hero__cta {
  height: 50px;
  padding: 0 25px;
  border-radius: 5px;
  background: var(--cr-blue);
  color: #fff;
  font: 500 15px/1 var(--z-font);
  letter-spacing: 0;
  text-transform: capitalize;
  transition: background-color 0.2s ease, filter 0.2s ease;
}

.cr-hero__cta:hover {
  background: var(--cr-blue);
  color: #fff;
  filter: brightness(1.08);
}

/* ── how we hire (8142:2125) ───────────────────────────────────────────────
   The export wraps this block in a white 16px card. On a white page that box is
   invisible, and on the dark ground it would fight the section below, so only
   its top inset survives: 200px — the export's 120px frame gap after the banner
   plus the card's own 80px.
   The card's 64px INLINE padding is dropped: every band on this page lines up
   with the header instead, so .cr-shell's own 30px is the only inset. */
.cr-hire {
  padding: 200px 0 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.cr-hire__head {
  display: grid;
  grid-template-columns: 520px 580px;
  justify-content: space-between;
  gap: 62px;
  align-items: start;
}

.cr-hire__headline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cr-hire__kicker {
  margin: 0;
  color: var(--cr-kicker);
  font: 700 12px/15px var(--z-font);
  letter-spacing: 0;
  text-transform: uppercase;
}

/* export: Bold 42, line box 51px (102px for two lines) */
.cr-hire__title {
  margin: 0;
  color: var(--cr-ink);
  font: 700 42px/51px var(--z-font);
  letter-spacing: 0;
}

.cr-hire__title em {
  font-style: normal;
  color: var(--cr-blue);
}

.cr-hire__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cr-hire__copy p {
  margin: 0;
  color: var(--cr-body);
  font: 400 16px/1.6 var(--z-font);
  letter-spacing: 0;
}

.cr-hire__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.cr-note {
  box-sizing: border-box;
  border-radius: 15px;
  padding: 24px;
  background: var(--cr-card-bg);
  box-shadow: inset 0 0 0 1px var(--cr-card-line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cr-note__num {
  margin: 0;
  color: var(--cr-blue);
  font: 700 18px/22px var(--z-font);
}

.cr-note__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cr-note__title {
  margin: 0;
  color: var(--cr-ink);
  font: 700 18px/22px var(--z-font);
}

.cr-note__text {
  margin: 0;
  color: var(--cr-body);
  font: 400 14px/1.5 var(--z-font);
}

/* ── opening roles ─────────────────────────────────────────────────────────
   Full-bleed inside the column — the export gives this band no inset, which is
   why the job cards sit slightly left of the two sections around them. */
.cr-roles {
  padding-top: 180px;
}

.cr-roles__title {
  margin: 0;
  color: var(--cr-ink);
  font: 700 32px/40px var(--z-font);
  letter-spacing: -0.84px;
}

.cr-roles__count {
  margin: 8px 0 0;
  color: var(--cr-body);
  font: 400 16px/26px var(--z-font);
}

.cr-jobs {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* export: 111px tall — 24px padding around a 63px content row */
.cr-job {
  box-sizing: border-box;
  border-radius: 15px;
  padding: 24px;
  background: var(--cr-card-bg);
  box-shadow: inset 0 0 0 1px var(--cr-card-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Rows carry [data-reveal], whose transition lives on .is-in — deliberately
     not on the base, so an item snaps to hidden instead of animating *out*
     when the script removes .no-js. Declaring opacity/transform here would put
     that transition back on the base and reintroduce exactly that. So this
     rule names box-shadow only, and hover moves box-shadow only: nothing here
     touches a property the reveal owns. */
  transition: box-shadow 0.18s ease;
}

.cr-job:hover {
  box-shadow: inset 0 0 0 1px var(--z-line), 0 14px 30px -22px rgba(0, 0, 0, 0.5);
}

.cr-job__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cr-job__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
}

.cr-job__icon img {
  width: 24px;
  height: 24px;
}

.cr-job__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cr-job__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cr-job__title {
  margin: 0;
  color: var(--cr-ink);
  font: 500 18px/26px var(--z-font);
  letter-spacing: -0.54px;
}

.cr-job__tag {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 6px 10px;
  background: var(--cr-chip-bg);
  color: var(--cr-chip-ink);
  font: 400 14px/25px var(--z-font);
  letter-spacing: 0;
  white-space: nowrap;
}

.cr-job__desc {
  margin: 0;
  color: var(--cr-body);
  font: 400 14px/22px var(--z-font);
  letter-spacing: 0;
}

.cr-job__apply {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cr-ink);
  font: 500 14px/22px var(--z-font);
  letter-spacing: 0.14px;
  text-transform: capitalize;
  white-space: nowrap;
}

.cr-job__apply:hover {
  color: var(--cr-blue);
}

/* The exported arrow is a flat #1F1E4D fill, which would vanish on the dark
   ground — the same vector is used as a mask so it inherits link colour. */
.cr-job__apply::after {
  content: "";
  width: 9.02px;
  height: 8.84px;
  background: currentColor;
  -webkit-mask: url("/assets/career/job-arrow.svg") no-repeat center / contain;
  mask: url("/assets/career/job-arrow.svg") no-repeat center / contain;
  transition: transform 0.18s ease;
}

.cr-job__apply:hover::after {
  transform: translateX(3px);
}

.cr-apply {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cr-apply__title {
  margin: 0;
  color: var(--cr-ink);
  font: 700 18px/28px var(--z-font);
}

.cr-apply__body {
  margin: 0;
  color: var(--cr-body);
  font: 400 16px/26px var(--z-font);
}

.cr-apply__body a {
  color: var(--cr-blue);
}

.cr-apply__body a:hover {
  color: var(--z-coral);
}

/* ── hiring process (8147:2125) ────────────────────────────────────────────
   Export: 96px/80px padding on a white card. Same treatment as how-we-hire —
   the card and its 80px inline inset are dropped so the band lines up with the
   header, and the top inset is the 222px the export leaves between the
   application note and this title. */
.cr-process {
  padding: 222px 0 160px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.cr-process__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cr-process__title {
  margin: 0;
  color: var(--cr-ink);
  font: 700 38px/46px var(--z-font);
  letter-spacing: -1px;
}

.cr-process__sub {
  margin: 0;
  color: var(--cr-body);
  font: 400 16px/1.5 var(--z-font);
}

.cr-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.cr-step {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

/* export: rgba(31,30,77,0.15) — i.e. the heading ink at 15%, which is what
   opacity on the ink var gives in BOTH themes */
.cr-step__num {
  flex-shrink: 0;
  width: 80px;
  color: var(--cr-ink);
  opacity: 0.15;
  font: 800 56px/1 var(--z-font);
  letter-spacing: 0;
}

.cr-step__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cr-step__title {
  margin: 0;
  color: var(--cr-ink);
  font: 700 20px/1.3 var(--z-font);
}

.cr-step__text {
  margin: 0;
  color: var(--cr-body);
  font: 400 15px/1.6 var(--z-font);
}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1300px) {
  /* the export's two fixed head columns (520 + 580 + 62) need 1162px */
  .cr-hire__head { grid-template-columns: minmax(0, 520px) minmax(0, 580px); }
}

@media (max-width: 1200px) {
  .cr-hire__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  /* the floating tiles start colliding with the copy here */
  .cr-hero__deco { display: none; }
  .cr-hero { min-height: 0; padding: 100px 20px 40px; }
  .cr-hire__head { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* the export's rhythm was set against a 1920 canvas — step it down once the
     banner stops being full-bleed tall */
  .cr-hire { padding-top: 140px; }
  .cr-roles { padding-top: 130px; }
  .cr-process { padding: 150px 0 120px; }
}

@media (max-width: 900px) {
  .cr-job { align-items: flex-start; flex-direction: column; gap: 16px; }
  .cr-job__apply { margin-left: 56px; }
}

@media (max-width: 720px) {
  /* No inset override here: .cr-shell carries the header pill's own geometry
     at every width, phones included. */
  .cr-hero__title { font-size: 38px; line-height: 46px; letter-spacing: -1.8px; }
  /* the export's line break belongs to the 60px measure only */
  .cr-br { display: none; }
  .cr-hire { padding: 88px 0 0; gap: 44px; }
  .cr-hire__title { font-size: 32px; line-height: 40px; }
  .cr-hire__cards { grid-template-columns: minmax(0, 1fr); }
  .cr-roles { padding-top: 80px; }
  .cr-roles__title { font-size: 26px; line-height: 34px; }
  .cr-process { padding: 96px 0 80px; gap: 44px; }
  .cr-process__title { font-size: 30px; line-height: 38px; }
  .cr-steps { gap: 36px; }
  .cr-step { gap: 18px; }
  .cr-step__num { width: 48px; font-size: 38px; }
}