/* ═══════════════════════════════════════════════════════════════
   /careers styling — hybrid landing + CRT aesthetic
   Borrows the docs page's design language (same tokens, same
   topbar pattern, same grid feel) but specialized for careers
   content: job listing cards, application forms, status pills.
   Cache-bust by bumping ?v= on link tags.
═══════════════════════════════════════════════════════════════ */

:root {
  --cr-bg-deep:    #050309;
  --cr-bg-panel:   rgba(20, 8, 28, .62);
  --cr-bg-panel-2: rgba(30, 10, 40, .78);
  --cr-border:     rgba(230, 57, 70, .18);
  --cr-border-2:   rgba(230, 57, 70, .36);
  --cr-border-soft:rgba(155, 122, 175, .14);

  --cr-red:        #E63946;
  --cr-pink:       #FF6B7A;
  --cr-pink-soft:  #FFB0BA;
  --cr-text:       #F0E8F5;
  --cr-muted:      #9B7AAF;
  --cr-dim:        #5A4070;
  --cr-bright:     #ffffff;
  --cr-success:    #27AE60;
  --cr-warn:       #E67E22;

  --cr-mono:       'JetBrains Mono', ui-monospace, Menlo, monospace;
  --cr-sans:       'Inter', system-ui, -apple-system, sans-serif;

  --cr-radius:     14px;
  --cr-radius-sm:  8px;
  --cr-ease:       cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.careers-body {
  font-family: var(--cr-sans);
  background: var(--cr-bg-deep);
  color: var(--cr-text);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.careers-body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(230, 57, 70, .08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(156, 107, 255, .05), transparent 65%);
  z-index: -1;
  pointer-events: none;
}

a { color: var(--cr-pink); text-decoration: none; transition: color .15s var(--cr-ease); }
a:hover { color: var(--cr-bright); }
a:focus-visible { outline: 2px solid var(--cr-pink-soft); outline-offset: 3px; border-radius: 3px; }

/* ─── TOPBAR ─── */
.cr-topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 3, 9, .85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cr-border);
}
.cr-topbar-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 14px 28px;
  display: flex; align-items: center; gap: 24px;
}
.cr-topbar-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--cr-bright);
  font-family: var(--cr-mono); font-weight: 800; font-size: 15px;
  letter-spacing: 1.2px; text-transform: uppercase;
}
.cr-topbar-brand-mark {
  width: 22px; height: 22px;
  background: var(--cr-red);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  filter: drop-shadow(0 0 8px rgba(230, 57, 70, .55));
}
.cr-topbar-brand-sep { color: var(--cr-dim); margin: 0 2px; }
.cr-topbar-brand-mode { color: var(--cr-muted); font-weight: 600; font-size: 12px; letter-spacing: 2px; }
.cr-topbar-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--cr-red); color: var(--cr-bright);
  font-family: var(--cr-mono); font-size: 11px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-left: auto;
  transition: transform .15s var(--cr-ease), box-shadow .15s var(--cr-ease);
}
.cr-topbar-cta:hover { color: var(--cr-bright); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(230,57,70,.45); }
@media (max-width: 720px) {
  .cr-topbar-inner { padding: 12px 18px; gap: 14px; }
}

/* ─── HERO ─── */
.cr-hero {
  position: relative;
  padding: 140px 28px 96px;
  overflow: hidden;
  border-bottom: 1px solid var(--cr-border);
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(230, 57, 70, .12), transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 100%, rgba(156, 107, 255, .07), transparent 60%);
}
.cr-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(230, 57, 70, .04) 0,
    rgba(230, 57, 70, .04) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none; mix-blend-mode: screen; opacity: .55;
}
.cr-hero::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 57, 70, .65), transparent);
}
.cr-hero-inner {
  max-width: 1100px; margin: 0 auto;
  text-align: center;
  position: relative; z-index: 1;
}
.cr-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--cr-mono); font-size: 12px; font-weight: 800;
  letter-spacing: 4px; text-transform: uppercase; color: var(--cr-pink);
  margin-bottom: 28px;
}
.cr-hero-eyebrow::before, .cr-hero-eyebrow::after { content: '//'; color: var(--cr-red); opacity: .65; }
.cr-hero h1 {
  /* Big, bold, marketing-grade. Scales from ~52px on phones up to
     ~120px on wide desktops. Tighter letter-spacing for headline
     density. */
  font-size: clamp(52px, 10vw, 124px);
  font-weight: 900; color: var(--cr-bright);
  letter-spacing: -2.5px; line-height: .95;
  margin: 0 0 22px;
  text-transform: uppercase;
}
.cr-hero h1 .accent {
  background: linear-gradient(180deg, #ff8b96 0%, var(--cr-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cr-hero-lede {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--cr-muted);
  max-width: 680px; margin: 0 auto 36px;
  line-height: 1.65;
}

/* Hero CTA cluster — sits above the filter chips so the page has
   one big primary action ("See open roles") that scroll-jumps to
   the listings grid. */
.cr-hero-actions {
  display: inline-flex; gap: 12px; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 36px;
}
.cr-hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  background: var(--cr-red);
  color: var(--cr-bright);
  font-family: var(--cr-mono);
  font-size: 13px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none;
  border: 0; cursor: pointer;
  transition: transform .15s var(--cr-ease), box-shadow .2s var(--cr-ease);
  box-shadow: 0 8px 28px rgba(230, 57, 70, .35);
}
.cr-hero-cta:hover {
  color: var(--cr-bright);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(230, 57, 70, .55);
}
.cr-hero-cta--ghost {
  background: transparent;
  color: var(--cr-text);
  border: 1px solid var(--cr-border-2);
  box-shadow: none;
}
.cr-hero-cta--ghost:hover {
  background: rgba(230, 57, 70, .08);
  border-color: var(--cr-red);
  box-shadow: none;
}

@media (max-width: 720px) {
  .cr-hero { padding: 100px 22px 72px; }
  .cr-hero h1 { letter-spacing: -1.5px; }
  .cr-hero-cta { padding: 14px 24px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   FILTER BAR — pill-shaped dropdowns + search, all in one row.
   Modeled on the old Studio Vivre layout (compact, glassy,
   center-aligned) but restyled to fit the phosphor identity.
   Sits just above the listings grid in the listings section,
   not in the hero — so it's at thumb-reach when scrolling to
   find a role.
═══════════════════════════════════════════════════════════════ */
.cr-filter-bar {
  position: relative;
  z-index: 50;                          /* lifts the whole filter bar's stacking context above the listings grid */
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto 36px;
  padding: 16px 20px;
  border-radius: 18px;
  /* Solid background instead of glass — backdrop-filter creates a
     stacking context that confined .cr-dd-menu's z-index to inside
     the bar. That's what caused the last dropdown row to render
     "behind" the listings below. Solid bg eliminates the issue. */
  background: rgba(20, 8, 28, .9);
  border: 1px solid var(--cr-border-soft);
}
@media (max-width: 720px) {
  .cr-filter-bar { padding: 14px; gap: 8px; }
  /* Search full-width on phones, dropdowns wrap below */
  .cr-search { flex: 1 1 100%; }
  /* Dropdowns slightly tighter so 2 fit per row on phone widths */
  .cr-dd-btn { padding: 9px 12px; font-size: 10px; letter-spacing: 1px; }
}
@media (max-width: 480px) {
  .cr-filter-bar { padding: 12px; }
  /* On very narrow viewports, give each dropdown its own row so the
     button label + selected value don't run off the edge. */
  .cr-dd { flex: 1 1 100%; }
  .cr-dd-btn { width: 100%; justify-content: space-between; }
}

/* Dropdown menu width cap: 86vw on phones so the menu never extends
   beyond the visible area. */
@media (max-width: 480px) {
  .cr-dd-menu {
    min-width: 220px;
    max-width: 86vw;
  }
}

/* Search input — flexes to fill remaining row space */
.cr-search {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
}
.cr-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cr-muted);
  font-size: 14px;
  pointer-events: none;
}
.cr-search-input {
  width: 100%;
  padding: 11px 14px 11px 38px;
  border-radius: 999px;
  border: 1px solid var(--cr-border-soft);
  background: rgba(5, 3, 9, .55);
  color: var(--cr-text);
  font-family: var(--cr-sans);
  font-size: 13.5px;
  outline: none;
  transition: border-color .15s var(--cr-ease), box-shadow .15s var(--cr-ease);
}
.cr-search-input::placeholder { color: var(--cr-dim); }
.cr-search-input:focus {
  border-color: var(--cr-red);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, .15);
}

/* Dropdown button — pill-shaped, glass, with chevron */
.cr-dd {
  position: relative;
  flex: 0 0 auto;
}
.cr-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--cr-border-soft);
  background: rgba(5, 3, 9, .55);
  color: var(--cr-text);
  font-family: var(--cr-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s var(--cr-ease);
  white-space: nowrap;
}
.cr-dd-btn:hover {
  border-color: var(--cr-border-2);
  color: var(--cr-bright);
}
.cr-dd-btn:focus-visible {
  outline: 2px solid var(--cr-pink-soft);
  outline-offset: 2px;
}
.cr-dd.has-value .cr-dd-btn {
  border-color: var(--cr-red);
  background: rgba(230, 57, 70, .08);
  color: var(--cr-bright);
}
.cr-dd.open .cr-dd-btn {
  border-color: var(--cr-red);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, .12);
}
.cr-dd-axis { color: var(--cr-muted); }
.cr-dd.has-value .cr-dd-axis { color: var(--cr-pink); }
.cr-dd-sep { color: var(--cr-dim); }
.cr-dd-val {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--cr-bright);
}
.cr-dd-caret {
  font-size: 10px;
  transition: transform .2s var(--cr-ease);
  color: var(--cr-muted);
}
.cr-dd.open .cr-dd-caret { transform: rotate(180deg); }

/* Dropdown menu — needs to be solidly opaque so listing content
   behind it doesn't bleed through and make options unreadable.
   The old rgba(.78) base was too see-through against the dark
   listings underneath. */
.cr-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  max-width: 320px;
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
  border-radius: var(--cr-radius);
  background: rgba(12, 4, 18, .97);
  border: 1px solid var(--cr-border-2);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 107, 122, .08);
  z-index: 100;
  animation: cr-dd-in .15s var(--cr-ease) both;
}

/* When a dropdown sits at the right side of the filter bar, its
   menu would otherwise extend past the viewport edge. Pin the
   menu to the right side of the trigger for any dropdown the
   JS marks with data-align="right" (we apply this to the
   rightmost dropdown — Category — at render time). */
.cr-dd[data-align="right"] .cr-dd-menu {
  left: auto;
  right: 0;
}
@keyframes cr-dd-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cr-dd-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  /* Each option gets its own faint solid background. If the
     menu's parent stacking context ever clips/punctures the menu
     bg, each row still has its own opaque layer. */
  background: rgba(12, 4, 18, .92);
  color: var(--cr-text) !important;
  font-family: var(--cr-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2px;
  text-align: left;
  cursor: pointer;
  transition: background .12s var(--cr-ease), border-color .12s var(--cr-ease);
  opacity: 1 !important;
  visibility: visible !important;
  position: relative;                   /* ensures each row owns its own paint layer */
}
.cr-dd-opt i {
  font-size: 14px;
  flex-shrink: 0;
  min-width: 14px;                     /* reserve space even if icon font fails to load */
  display: inline-block;
}
.cr-dd-opt > span {
  flex: 1;
  color: var(--cr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cr-dd-opt > span.cr-dd-opt-count {
  flex: 0 0 auto;
  color: var(--cr-muted);
}
.cr-dd-opt:hover {
  background: rgba(230, 57, 70, .08);
}
.cr-dd-opt.active {
  background: rgba(230, 57, 70, .14);
  border-color: var(--cr-red);
  font-weight: 700;
  color: var(--cr-bright) !important;
}
.cr-dd-opt.active > span { color: var(--cr-bright); }
.cr-dd-opt-count {
  font-family: var(--cr-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--cr-muted);
  background: rgba(0, 0, 0, .35);
  padding: 2px 7px;
  border-radius: 999px;
}

/* Clear-all chip */
.cr-filter-clear {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(230, 57, 70, .4);
  background: rgba(230, 57, 70, .12);
  color: var(--cr-pink);
  font-family: var(--cr-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s var(--cr-ease);
}
.cr-filter-clear:hover {
  background: rgba(230, 57, 70, .22);
  color: var(--cr-bright);
}
.cr-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--cr-border-soft);
  background: rgba(5, 3, 9, .55);
  color: var(--cr-muted);
  font-family: var(--cr-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer;
  transition: all .15s var(--cr-ease);
}
.cr-filter-chip:hover { border-color: var(--cr-border-2); color: var(--cr-text); }
.cr-filter-chip.active {
  background: rgba(230, 57, 70, .15);
  border-color: var(--cr-red);
  color: var(--cr-bright);
}
.cr-filter-chip-count {
  background: rgba(0, 0, 0, .35);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 9.5px;
  letter-spacing: .5px;
}

/* ═══════════════════════════════════════════════════════════════
   BENEFITS SECTION — sits between hero and listings grid.
   Hand-authored content describing what makes NightHawk roles
   different. Cards float subtly to give the section life
   without overwhelming the listings grid below it.
═══════════════════════════════════════════════════════════════ */
.cr-benefits {
  position: relative;
  padding: 80px 28px 56px;
  border-bottom: 1px solid var(--cr-border);
  overflow: hidden;
}
.cr-benefits::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(122, 184, 232, .06), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 100%, rgba(156, 107, 255, .05), transparent 60%);
  pointer-events: none;
}
.cr-benefits-inner {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}
.cr-benefits-eyebrow {
  display: inline-block;
  font-family: var(--cr-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cr-pink);
  margin-bottom: 14px;
}
.cr-benefits-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  color: var(--cr-bright);
  letter-spacing: -1px;
  line-height: 1.05;
  margin: 0 0 14px;
}
.cr-benefits-title .accent {
  background: linear-gradient(180deg, #ff8b96 0%, var(--cr-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cr-benefits-lede {
  font-size: 15.5px;
  color: var(--cr-muted);
  max-width: 680px;
  margin: 0 auto 44px;
  line-height: 1.7;
}
.cr-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: left;
}
@media (max-width: 920px) { .cr-benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cr-benefits-grid { grid-template-columns: 1fr; } }

.cr-benefit {
  position: relative;
  padding: 26px 26px 24px;
  border-radius: var(--cr-radius);
  background: var(--cr-bg-panel);
  border: 1px solid var(--cr-border-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .3s var(--cr-ease), border-color .2s var(--cr-ease), box-shadow .3s var(--cr-ease);
}
.cr-benefit::before {
  /* Subtle conic glow that brightens on hover. Matches the
     dynamic feel of the old Moon Software cards without
     overpowering the CRT phosphor identity. */
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--cr-radius);
  background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(255, 107, 122, .08), transparent 55%);
  opacity: 0;
  transition: opacity .35s var(--cr-ease);
  pointer-events: none;
}
.cr-benefit:hover {
  transform: translateY(-4px);
  border-color: var(--cr-border-2);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 107, 122, .05);
}
.cr-benefit:hover::before { opacity: 1; }

.cr-benefit-icon {
  width: 46px; height: 46px;
  border-radius: 11px;
  background: rgba(230, 57, 70, .12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cr-red);
  font-size: 22px;
  margin-bottom: 16px;
}
.cr-benefit h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--cr-bright);
  margin: 0 0 8px;
  letter-spacing: -.2px;
}
.cr-benefit p {
  font-size: 13.5px;
  color: var(--cr-muted);
  line-height: 1.65;
  margin: 0;
}

/* Subtle float so the grid feels alive without being noisy.
   Three stagger groups via nth-child so they don't bob in lockstep. */
@keyframes cr-bene-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: no-preference) {
  .cr-benefit:nth-child(3n+1) { animation: cr-bene-float 7s ease-in-out infinite; }
  .cr-benefit:nth-child(3n+2) { animation: cr-bene-float 8.5s ease-in-out infinite 1.2s; }
  .cr-benefit:nth-child(3n+3) { animation: cr-bene-float 9.5s ease-in-out infinite 2.4s; }
  /* Hover overrides the float so a cursor target doesn't move under you */
  .cr-benefit:hover { animation-play-state: paused; }
}

/* ─── MAIN GRID ─── */
.cr-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 28px 96px;
}
.cr-section {
  margin-bottom: 48px;
}
.cr-section:last-child { margin-bottom: 0; }
.cr-section-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--cr-border-soft);
  padding-bottom: 12px;
}
.cr-section-head-text { flex: 1; }
.cr-section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--cr-mono);
  font-size: 10px; font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase; color: var(--cr-pink);
  margin-bottom: 4px;
}
.cr-section-label::before { content: '//'; color: var(--cr-red); opacity: .55; }
.cr-section-title { font-size: 20px; font-weight: 800; color: var(--cr-bright); margin: 0; }
.cr-section-blurb { font-size: 12.5px; color: var(--cr-muted); margin-top: 2px; }
.cr-section-count { font-family: var(--cr-mono); font-size: 11px; color: var(--cr-dim); letter-spacing: 1.4px; font-weight: 700; text-transform: uppercase; }

/* Job cards */
.cr-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
@media (max-width: 880px) { .cr-grid { grid-template-columns: 1fr; } }

.cr-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 22px 24px;
  border-radius: var(--cr-radius);
  background: var(--cr-bg-panel);
  border: 1px solid var(--cr-border-soft);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  text-decoration: none; color: inherit;
  transition: transform .2s var(--cr-ease), border-color .15s var(--cr-ease), box-shadow .2s var(--cr-ease);
  overflow: hidden;
}
.cr-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--accent, var(--cr-red));
  opacity: .6;
  transition: opacity .15s var(--cr-ease);
}
.cr-card:hover {
  transform: translateY(-3px);
  border-color: var(--cr-border-2);
  box-shadow: 0 18px 42px rgba(0,0,0,.45), 0 0 0 1px rgba(255,107,122,.04);
}
.cr-card:hover::before { opacity: 1; }
.cr-card:focus-visible { outline: 2px solid var(--cr-pink-soft); outline-offset: 3px; }

.cr-card-head {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 10px;
}
.cr-card-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: rgba(230, 57, 70, .12);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent, var(--cr-red));
  font-size: 20px;
  flex-shrink: 0;
}
.cr-card-head-text { flex: 1; min-width: 0; }
.cr-card-title {
  font-size: 17px; font-weight: 800; color: var(--cr-bright);
  letter-spacing: -.2px; margin: 0 0 4px; line-height: 1.25;
}
.cr-card-cat {
  font-family: var(--cr-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--cr-muted);
}
.cr-card-cat::before { content: '// '; color: var(--accent, var(--cr-red)); opacity: .7; }

.cr-card-tldr {
  font-size: 13.5px; color: var(--cr-muted);
  line-height: 1.6; margin: 0 0 16px;
  flex: 1;
}

.cr-card-pills {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
  align-items: center;
}
.cr-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--cr-mono);
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  /* Long ranges (e.g. "$5 to $50 per task — varies by job") would
     otherwise dominate the card; cap + ellipsis keeps the pills
     row tidy. Full text is still visible in the listing detail
     page (uses its own larger meta row). */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-pill i { font-size: 10px; flex-shrink: 0; }
.cr-pill--compensation {
  /* Compensation usually has the most text; give it a slightly
     wider cap on cards so a short range like "$15/hr" doesn't
     truncate to "$15…" but a long sentence does get cut. */
  max-width: 240px;
}
.cr-pill--type-paid      { background: rgba(39, 174, 96, .14);  color: #5fd084; }
.cr-pill--type-hybrid    { background: rgba(230, 57, 70, .14);  color: var(--cr-pink); }
.cr-pill--type-volunteer { background: rgba(155, 122, 175, .14); color: var(--cr-muted); }
.cr-pill--compensation   { background: rgba(122, 184, 232, .12); color: #9ccdef; }
.cr-pill--featured       { background: rgba(255, 215, 0, .14);  color: #ffd966; }
.cr-pill--status-paused  { background: rgba(230, 126, 34, .14); color: #f4b173; }
.cr-pill--status-filled  { background: rgba(155, 122, 175, .14); color: var(--cr-muted); }

.cr-card-meta {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--cr-border-soft);
  font-family: var(--cr-mono);
  font-size: 10px; letter-spacing: .8px; font-weight: 700;
}
.cr-card-location { color: var(--cr-muted); }
.cr-card-apply-cta {
  margin-left: auto;
  color: var(--cr-pink);
  font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase;
}
.cr-card:hover .cr-card-apply-cta { color: var(--cr-bright); }

/* Empty state */
.cr-empty {
  text-align: center;
  padding: 56px 28px;
  border: 1px dashed var(--cr-border);
  border-radius: var(--cr-radius);
  color: var(--cr-muted);
}
.cr-empty i { font-size: 32px; color: var(--cr-dim); margin-bottom: 12px; display: block; }
.cr-empty h2 { font-size: 18px; color: var(--cr-bright); margin: 0 0 8px; font-weight: 700; }
.cr-empty p { margin: 0; font-size: 13px; }

/* ─── SINGLE LISTING ─── */
.cr-listing {
  max-width: 920px;
  margin: 0 auto;
  padding: 56px 28px 96px;
}
.cr-breadcrumb {
  font-family: var(--cr-mono);
  font-size: 11px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--cr-muted);
  margin-bottom: 18px;
}
.cr-breadcrumb a { color: var(--cr-muted); }
.cr-breadcrumb a:hover { color: var(--cr-bright); }
.cr-breadcrumb .sep { margin: 0 8px; color: var(--cr-dim); }

.cr-listing h1 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 900; color: var(--cr-bright);
  letter-spacing: -1px; line-height: 1.1;
  margin: 0 0 16px;
}
.cr-listing-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 22px;
}
.cr-listing-tldr {
  padding: 20px 24px;
  border-radius: var(--cr-radius);
  background: rgba(230, 57, 70, .07);
  border: 1px solid var(--cr-border);
  border-left: 3px solid var(--cr-red);
  margin-bottom: 36px;
  font-size: 14.5px; line-height: 1.65;
  color: var(--cr-text);
}
.cr-listing-tldr-label {
  display: inline-block;
  font-family: var(--cr-mono);
  font-size: 10px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--cr-pink);
  margin-bottom: 8px;
}

.cr-listing-content {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--cr-text);
}
.cr-listing-content h2 {
  font-size: 22px; font-weight: 800; color: var(--cr-bright);
  letter-spacing: -.3px; line-height: 1.2;
  margin: 40px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cr-border-soft);
}
.cr-listing-content h2:first-child { margin-top: 0; }
.cr-listing-content h3 {
  font-size: 17px; font-weight: 700; color: var(--cr-bright);
  margin: 28px 0 10px;
}
.cr-listing-content p { margin: 0 0 16px; }
.cr-listing-content ul, .cr-listing-content ol { margin: 0 0 18px; padding-left: 22px; }
.cr-listing-content li { margin-bottom: 6px; }
.cr-listing-content li::marker { color: var(--cr-red); }
.cr-listing-content strong { color: var(--cr-bright); font-weight: 700; }
.cr-listing-content code {
  background: rgba(230, 57, 70, .12);
  border: 1px solid rgba(230, 57, 70, .22);
  color: var(--cr-pink-soft);
  padding: 1px 6px; border-radius: 4px;
  font-family: var(--cr-mono); font-size: 12.5px;
}
.cr-listing-content a {
  color: var(--cr-pink);
  text-decoration: underline;
  text-decoration-color: rgba(255, 107, 122, .4);
}
.cr-listing-content blockquote {
  margin: 0 0 18px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, .025);
  border-left: 3px solid var(--cr-red);
  border-radius: 0 var(--cr-radius-sm) var(--cr-radius-sm) 0;
  color: var(--cr-muted);
}

.cr-section-block {
  margin: 32px 0;
  padding: 20px 24px;
  border-radius: var(--cr-radius);
  background: rgba(5, 3, 9, .35);
  border: 1px solid var(--cr-border-soft);
}
.cr-section-block-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--cr-mono);
  font-size: 10px; font-weight: 800;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--cr-pink);
  margin-bottom: 12px;
}
.cr-section-block-label::before { content: '//'; color: var(--cr-red); opacity: .6; }
.cr-section-block ul {
  list-style: none; padding: 0; margin: 0;
}
.cr-section-block li {
  position: relative;
  padding: 8px 0 8px 24px;
  font-size: 14.5px;
  line-height: 1.6;
  border-bottom: 1px dashed var(--cr-border-soft);
}
.cr-section-block li:last-child { border-bottom: 0; }
.cr-section-block li::before {
  content: '▸';
  position: absolute; left: 4px; top: 8px;
  color: var(--cr-red);
}

/* Apply CTA bar at bottom of listing */
.cr-apply-bar {
  position: sticky; bottom: 18px;
  margin-top: 48px;
  padding: 18px 24px;
  border-radius: 14px;
  background: rgba(20, 8, 28, .92);
  border: 1px solid var(--cr-border-2);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  flex-wrap: wrap;
}
@media (max-width: 540px) {
  .cr-apply-bar {
    padding: 14px 16px;
    gap: 10px;
    bottom: 10px;
  }
  .cr-apply-bar-text { min-width: 100%; }
  .cr-apply-btn { width: 100%; justify-content: center; }
}
.cr-apply-bar-text { flex: 1; min-width: 200px; }
.cr-apply-bar-title { font-weight: 800; color: var(--cr-bright); font-size: 15px; margin-bottom: 2px; }
.cr-apply-bar-sub { font-size: 12px; color: var(--cr-muted); font-family: var(--cr-mono); letter-spacing: .5px; }
.cr-apply-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--cr-red); color: var(--cr-bright);
  font-family: var(--cr-mono); font-size: 11px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase;
  border: 0; cursor: pointer;
  transition: transform .15s var(--cr-ease), box-shadow .15s var(--cr-ease);
  text-decoration: none;
}
.cr-apply-btn:hover { color: var(--cr-bright); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(230,57,70,.55); }
.cr-apply-btn:disabled,
.cr-apply-btn[disabled],
.cr-apply-btn[aria-disabled="true"] {
  background: rgba(155, 122, 175, .14);
  color: var(--cr-muted);
  border: 1px solid var(--cr-border-soft);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}
.cr-apply-btn:disabled i,
.cr-apply-btn[aria-disabled="true"] i {
  color: var(--cr-muted);
}
.cr-apply-btn--secondary {
  background: transparent; color: var(--cr-text);
  border: 1px solid var(--cr-border-2);
}
.cr-apply-btn--secondary:hover {
  background: rgba(230, 57, 70, .08); color: var(--cr-bright);
  border-color: var(--cr-red); box-shadow: none;
}

/* ─── APPLY FORM ─── */
.cr-apply-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 28px 96px;
}
.cr-form-card {
  padding: 32px;
  border-radius: var(--cr-radius);
  background: var(--cr-bg-panel);
  border: 1px solid var(--cr-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.cr-form-field {
  margin-bottom: 22px;
}
.cr-form-field:last-child { margin-bottom: 0; }
.cr-form-label {
  display: block;
  font-family: var(--cr-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--cr-pink);
  margin-bottom: 8px;
}
.cr-form-label .cr-form-required {
  color: var(--cr-red);
  margin-left: 4px;
  font-weight: 900;
}
.cr-form-help {
  font-size: 12px;
  color: var(--cr-muted);
  margin: 4px 0 10px;
  line-height: 1.5;
}
.cr-form-input,
.cr-form-textarea,
.cr-form-select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--cr-border-soft);
  background: rgba(5, 3, 9, .6);
  color: var(--cr-text);
  font-family: var(--cr-sans);
  font-size: 14.5px;
  outline: none;
  transition: border-color .15s var(--cr-ease), box-shadow .15s var(--cr-ease);
}
.cr-form-input:focus, .cr-form-textarea:focus, .cr-form-select:focus {
  border-color: var(--cr-red);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, .14);
}
.cr-form-input::placeholder, .cr-form-textarea::placeholder { color: var(--cr-dim); }
.cr-form-textarea { resize: vertical; min-height: 100px; line-height: 1.55; }

.cr-form-checkbox-row {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--cr-border-soft);
  background: rgba(5, 3, 9, .35);
  transition: border-color .15s var(--cr-ease);
}
.cr-form-checkbox-row:hover { border-color: var(--cr-border-2); }
.cr-form-checkbox-row input { width: 18px; height: 18px; accent-color: var(--cr-red); flex-shrink: 0; margin-top: 2px; }
.cr-form-checkbox-row span { font-size: 14px; line-height: 1.5; color: var(--cr-text); }

.cr-form-multi {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
@media (max-width: 600px) { .cr-form-multi { grid-template-columns: 1fr; } }
.cr-form-multi label {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--cr-border-soft);
  background: rgba(5, 3, 9, .35);
  cursor: pointer;
  font-size: 13.5px;
  transition: border-color .15s var(--cr-ease), background .15s var(--cr-ease);
}
.cr-form-multi label:hover { border-color: var(--cr-border-2); background: rgba(230, 57, 70, .06); }
.cr-form-multi input { accent-color: var(--cr-red); }
.cr-form-multi input:checked + span { color: var(--cr-bright); font-weight: 600; }

.cr-form-actions {
  display: flex; gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--cr-border-soft);
  flex-wrap: wrap;
}

.cr-form-error {
  padding: 12px 16px;
  background: rgba(230, 57, 70, .12);
  border: 1px solid var(--cr-red);
  border-radius: 8px;
  color: #ff8b96;
  font-size: 13.5px;
  margin-bottom: 20px;
}

/* Draft autosave banner — appears at the top of the apply form
   when a saved draft is detected. User chooses to restore or
   discard. */
.cr-draft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin-bottom: 22px;
  border-radius: 10px;
  background: rgba(122, 184, 232, .08);
  border: 1px solid rgba(122, 184, 232, .4);
  color: var(--cr-text);
  font-size: 13.5px;
  flex-wrap: wrap;
}
.cr-draft-banner i { color: #7AB8E8; margin-right: 6px; }
.cr-draft-banner strong { color: var(--cr-bright); margin-right: 4px; }
.cr-draft-banner .cr-apply-btn { padding: 8px 16px; font-size: 11px; }

/* Subtle status indicator at the bottom of the form — fades in
   for ~1.8s after each autosave to confirm to the user that
   their progress is being saved. */
.cr-draft-status {
  position: absolute;
  bottom: -28px;
  right: 0;
  font-family: var(--cr-mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  color: var(--cr-muted);
  opacity: 0;
  transition: opacity .25s var(--cr-ease);
  pointer-events: none;
}
.cr-draft-status::before { content: '✓ '; color: #27AE60; }
.cr-draft-status.visible { opacity: 1; }
.cr-form-card { position: relative; }

.cr-success {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 80px 28px;
}
.cr-success i {
  font-size: 56px;
  color: var(--cr-success);
  margin-bottom: 18px;
  display: block;
}
.cr-success h2 { font-size: 28px; font-weight: 900; color: var(--cr-bright); margin: 0 0 12px; letter-spacing: -.5px; }
.cr-success p { color: var(--cr-muted); font-size: 14.5px; margin-bottom: 24px; line-height: 1.7; }

/* ─── FOOTER ─── */
.cr-footer {
  border-top: 1px solid var(--cr-border);
  padding: 26px 28px;
  text-align: center;
  font-family: var(--cr-mono);
  font-size: 11px; letter-spacing: 1px;
  color: var(--cr-dim);
  background: rgba(5, 3, 9, .6);
}
.cr-footer a { color: var(--cr-muted); margin: 0 12px; }
.cr-footer a:hover { color: var(--cr-bright); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}