/*
 * Justworks theme.
 *
 * Use it:
 *   JOB_BOARD_PROVIDER=greenhouse
 *   NEXT_PUBLIC_TENANT_ID=justworks
 *   TENANT_ID=justworks
 *   GREENHOUSE_BOARD_TOKEN=justworks
 *   NEXT_PUBLIC_COMPANY_NAME=Justworks
 *   NEXT_PUBLIC_THEME_CSS=/themes/justworks.css
 *   NEXT_PUBLIC_LOGO_URL=https://logotyp.us/file/justworks.svg
 */

:root {
  --brand-navy: #fff8ef;
  --brand-blue: #2046ff;
  --brand-mist: #f7f3eb;
  --brand-ink: #101820;
  --brand-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --jw-blue: #2046ff;
  --jw-blue-dark: #172fc0;
  --jw-ink: #101820;
  --jw-cream: #fff8ef;
  --jw-mint: #c8f2de;
  --jw-peach: #ffc69b;
  --jw-paper: #fbf7f0;
  --jw-line: rgba(16, 24, 32, 0.14);
  --jw-muted: #5f6972;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--jw-paper);
  color: var(--jw-ink);
  font-family: var(--brand-font);
}

body > div > header {
  border-bottom: 1px solid var(--jw-line) !important;
  background: rgba(255, 248, 239, 0.96) !important;
  color: var(--jw-ink) !important;
  backdrop-filter: blur(14px);
}

body > div > header > div {
  height: 76px !important;
  max-width: 1180px !important;
}

body > div > header img {
  width: 142px !important;
  max-width: 142px;
  height: auto !important;
  object-fit: contain;
}

body > div > header > div > a:first-child > span {
  display: none !important;
}

body > div > header nav a,
body > div > header > div > div a {
  color: var(--jw-ink) !important;
  text-decoration: none;
}

body > div > header nav a:hover,
body > div > header > div > div a:first-child:hover {
  color: var(--jw-blue) !important;
}

body > div > header > div > div a:last-child {
  color: white !important;
}

main > section:first-child {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  border-bottom: 1px solid var(--jw-line) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 198, 155, 0.74), transparent 22rem),
    radial-gradient(circle at 85% 76%, rgba(200, 242, 222, 0.76), transparent 21rem),
    linear-gradient(115deg, #fff8ef 0%, #fff8ef 54%, #f2f7ff 100%) !important;
  color: var(--jw-ink) !important;
}

main > section:first-child::after {
  content: '';
  position: absolute;
  right: 8%;
  bottom: 66px;
  width: min(34vw, 390px);
  aspect-ratio: 1;
  border: 2px solid rgba(32, 70, 255, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(32, 70, 255, 0.92), rgba(32, 70, 255, 0.46)),
    var(--jw-blue);
  box-shadow: 0 32px 80px rgba(32, 70, 255, 0.18);
}

main > section:first-child::before {
  content: '';
  position: absolute;
  right: calc(8% + 150px);
  bottom: 292px;
  z-index: 1;
  width: 132px;
  height: 132px;
  border-radius: 999px;
  background: var(--jw-mint);
  box-shadow: 0 26px 54px rgba(16, 24, 32, 0.12);
}

main > section:first-child > div {
  position: relative;
  z-index: 2;
  max-width: 1180px !important;
  padding-top: 118px !important;
  padding-bottom: 126px !important;
}

main > section:first-child p:first-child {
  color: var(--jw-blue) !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.16em !important;
}

main > section:first-child h1 {
  max-width: 670px !important;
  color: var(--jw-ink) !important;
  font-size: clamp(3rem, 2.2rem + 3vw, 5.15rem) !important;
  font-weight: 850 !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

main > section:first-child p:last-of-type {
  max-width: 600px !important;
  color: var(--jw-muted) !important;
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
}

main > section:first-child a[href='#open-positions'] {
  margin-top: 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--jw-blue) !important;
  padding: 17px 30px !important;
  color: white !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

main > section:first-child a[href='#open-positions']:hover {
  background: var(--jw-blue-dark) !important;
}

body > div > main > div:first-of-type {
  max-width: 1180px !important;
  padding-top: 72px !important;
  padding-bottom: 82px !important;
}

main > div > p:first-child {
  color: var(--jw-muted) !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
}

main > div > div[class*='space-y-'] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 42px;
}

main > div > div[class*='space-y-'] > div {
  min-width: 0;
}

main > div > div[class*='space-y-'] h2 {
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--jw-line);
  padding-bottom: 15px !important;
  color: var(--jw-blue) !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.15em !important;
}

main > div ul.divide-y {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

main > div ul.divide-y li {
  border-color: var(--jw-line) !important;
}

main > div ul.divide-y a {
  background: transparent !important;
  padding: 22px 0 !important;
}

main > div ul.divide-y a:hover {
  background: transparent !important;
}

main > div ul.divide-y a p:first-child {
  color: var(--jw-ink) !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

main > div ul.divide-y a p:last-child {
  color: var(--jw-muted) !important;
}

main > div ul.divide-y a span {
  border-radius: 999px;
  background: rgba(32, 70, 255, 0.1);
  padding: 8px 12px;
  color: var(--jw-blue) !important;
  font-weight: 800 !important;
}

body > div > main > div.max-w-3xl {
  max-width: 850px !important;
  padding-top: 54px !important;
}

body > div > main > div.max-w-3xl > a {
  color: var(--jw-blue) !important;
  font-weight: 750 !important;
  text-decoration: none;
}

body > div > main > div.max-w-3xl > header {
  border-color: var(--jw-line) !important;
  border-radius: 10px;
  background: #fffdfa !important;
  padding: 30px !important;
  box-shadow: 0 22px 70px rgba(16, 24, 32, 0.08);
}

body > div > main > div.max-w-3xl > header p:first-child {
  color: var(--jw-blue) !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
}

body > div > main > div.max-w-3xl > header h1 {
  color: var(--jw-ink) !important;
  font-size: 2.5rem !important;
  line-height: 1.13 !important;
  letter-spacing: 0 !important;
}

body > div > main > div.max-w-3xl > header p {
  color: var(--jw-muted) !important;
}

body > div > main > div.max-w-3xl > header div {
  border-color: rgba(32, 70, 255, 0.18) !important;
  background: rgba(32, 70, 255, 0.08) !important;
  color: var(--jw-blue) !important;
}

body > div > main > div.max-w-3xl > header span {
  background: var(--jw-blue) !important;
}

.gh-content {
  color: #26313a !important;
  font-size: 1rem !important;
  line-height: 1.72 !important;
}

.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content h5,
.gh-content h6 {
  color: var(--jw-ink) !important;
  letter-spacing: 0 !important;
}

.gh-content a {
  color: var(--jw-blue) !important;
}

section#apply {
  scroll-margin-top: 94px;
  border-top-color: var(--jw-line) !important;
  border-radius: 10px;
  background: #fffdfa;
  padding: 30px !important;
  box-shadow: 0 18px 54px rgba(16, 24, 32, 0.06);
}

section#apply h2 {
  color: var(--jw-ink) !important;
}

section#apply > p,
section#apply p.text-xs {
  color: var(--jw-muted) !important;
}

section#apply input,
section#apply textarea,
section#apply select {
  border-color: rgba(16, 24, 32, 0.22) !important;
  border-radius: 8px !important;
  color: var(--jw-ink) !important;
}

section#apply input:focus,
section#apply textarea:focus,
section#apply select:focus {
  border-color: var(--jw-blue) !important;
  box-shadow: 0 0 0 3px rgba(32, 70, 255, 0.14) !important;
}

section#apply button[type='submit'] {
  border-radius: 999px !important;
  background: var(--jw-blue) !important;
  font-weight: 800 !important;
}

section#apply button[type='submit']:hover {
  background: var(--jw-blue-dark) !important;
  opacity: 1 !important;
}

body > div > footer {
  margin-top: 0 !important;
  border-color: var(--jw-line) !important;
  background: var(--jw-ink) !important;
}

body > div > footer p,
body > div > footer a {
  color: rgba(255, 255, 255, 0.78) !important;
}

body > div > footer svg {
  color: var(--jw-mint) !important;
}

@media (max-width: 980px) {
  main > section:first-child::after,
  main > section:first-child::before {
    opacity: 0.28;
  }

  main > div > div[class*='space-y-'] {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body > div > header > div {
    height: 70px !important;
  }

  body > div > header img {
    width: 126px !important;
  }

  main > section:first-child {
    min-height: 520px;
  }

  main > section:first-child::after,
  main > section:first-child::before {
    display: none;
  }

  main > section:first-child > div {
    padding-top: 88px !important;
    padding-bottom: 90px !important;
  }

  main > section:first-child h1 {
    font-size: 2.7rem !important;
  }

  body > div > main > div.max-w-3xl > header {
    padding: 22px !important;
  }

  body > div > main > div.max-w-3xl > header h1 {
    font-size: 2rem !important;
  }

  section#apply {
    padding: 22px !important;
  }
}