/*
 * Fun theme (Lever board jobs.lever.co/funxyz), matched to fun.xyz/careers:
 * near-black page, white type, light pill buttons, hairline dividers, no
 * accent colour. Suisse Int'l (regular only) loads from the customer's
 * Webflow CDN, Inter from Google Fonts. The wordmark is the dark
 * /funxyz-logo-dark.png (the Trust Check email puts it on white) and the
 * header inverts it; favicon and touch icon are the live assets on their CDN.
 *
 * Deployment:
 *   ATS_PROVIDER=lever
 *   LEVER_SITE=funxyz
 *   TENANT_ID=funxyz
 *   NEXT_PUBLIC_TENANT_ID=funxyz
 *   NEXT_PUBLIC_COMPANY_NAME=Fun
 *   NEXT_PUBLIC_LEGAL_NAME=The Fun Group, Inc
 *   NEXT_PUBLIC_THEME_CSS=/themes/funxyz.css
 *   NEXT_PUBLIC_LOGO_URL=/funxyz-logo-dark.png
 *   NEXT_PUBLIC_LOGO_LINK_URL=https://fun.xyz/
 *   NEXT_PUBLIC_FAVICON_URL=https://cdn.prod.website-files.com/6970dab74440547b6c673f52/6970dd9eed77ed68bce126e8_favicon.svg
 *   NEXT_PUBLIC_APPLE_ICON_URL=https://cdn.prod.website-files.com/6970dab74440547b6c673f52/69eb98c7ec4314ea3e4fa6e2_apple-icon-fun.png
 *   NEXT_PUBLIC_CAREERS_TITLE=Open roles
 *   NEXT_PUBLIC_CAREERS_INTRO=
 *   NEXT_PUBLIC_META_DESCRIPTION=Open roles at Fun, protected by Polyguard Trust Checks.
 *   NEXT_PUBLIC_SITE_NAV={"links":[{"label":"Products","href":"https://fun.xyz/products/deposit"},{"label":"Industries","href":"https://fun.xyz/solutions/fintech-payments"},{"label":"Company","href":"https://fun.xyz/about"}],"cta":{"label":"Contact","href":"https://fun.xyz/contact"}}
 *   NEXT_PUBLIC_BOARD_LAYOUT=tabs
 *   NEXT_PUBLIC_EMBED_JOB_LINKS=hosted
 *   careersPageUrl=https://fun.xyz/careers (console branding)
 * On a platform deployment the same values are the App's branding fields.
 *
 * Embed on fun.xyz/careers, under the page's own "Open roles" heading:
 *   <div id="polyguard_jobs"></div>
 *   <script src="https://funxyz.prescreen.polyguard.ai/embed/embed_js?for=funxyz"></script>
 *
 * Palette and type sizes are fun.xyz's Webflow tokens (--gray--gray-N,
 * --alpha--alpha-N, .heading-style-*, .button, .careers-job_row).
 *
 * Utility re-maps are un-layered so they beat Tailwind v4's @layer utilities,
 * and scoped :not(.pg-admin *) to leave the /admin console alone.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Suisse Intl';
  src: url('https://cdn.prod.website-files.com/6970dab74440547b6c673f52/6982b225a514ad55428c920b_SuisseIntl-Regular.ttf')
    format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* fun.xyz tokens */
  --fun-bg: #0d0d0d; /* gray-1, page */
  --fun-surface: #191919; /* gray-2 */
  --fun-surface-2: #222222; /* gray-3 */
  --fun-border: #292929; /* gray-4, dividers */
  --fun-input: #3a3a3a; /* gray-6, form fields */
  --fun-fg: #ffffff; /* alpha-12 */
  --fun-fg-2: #eeeeee; /* gray-12, buttons */
  --fun-muted: #b3b3b3; /* gray-11 */
  --fun-faint: #999999; /* gray-10, team headers */
  --fun-faint-2: #6d6d6d; /* gray-9 */
  --fun-alpha-3: rgba(255, 255, 255, 0.07);
  --fun-alpha-6: rgba(255, 255, 255, 0.17);
  --fun-alpha-9: rgba(255, 255, 255, 0.39);
  --fun-alpha-11: rgba(255, 255, 255, 0.68);
  --fun-display: 'Suisse Intl', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Brand tokens consumed by the shared chrome */
  --brand-navy: var(--fun-bg);
  --brand-blue: var(--fun-fg);
  --brand-mist: var(--fun-surface);
  --brand-ink: var(--fun-fg);
  --brand-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  --brand-title-size: 3rem;
  --brand-title-line: 1.1;
  --brand-body-size: 0.9375rem;
  --brand-body-line: 1.5;
}

html,
body {
  background: var(--fun-bg);
  color: var(--fun-fg);
}

/* ---- Buttons (site .button) --------------------------------------------- */

/* Primary CTA. Non-button uses of the utility (header, hero) keep the page
   colour. */
button.bg-\[var\(--brand-navy\)\]:not(.pg-admin *),
.site-hero-cta,
.board-cta a {
  border-radius: 9999px;
  background: var(--fun-fg-2);
  color: var(--fun-bg);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.42;
}
button.bg-\[var\(--brand-navy\)\]:hover:not(:disabled):not(.pg-admin *),
.site-hero-cta:hover,
.board-cta a:hover {
  background: var(--fun-fg);
  color: var(--fun-bg);
  opacity: 1;
}
.text-\[var\(--brand-navy\)\]:not(.pg-admin *) {
  color: var(--fun-fg);
}
/* Selected facet chips: light fill, dark label. */
.bg-\[var\(--brand-blue\)\]:not(.pg-admin *) {
  background-color: var(--fun-fg-2);
  color: var(--fun-bg);
}
.bg-\[var\(--brand-blue\)\].text-white:not(.pg-admin *) {
  color: var(--fun-bg);
}

/* ---- Header (hosted) ----------------------------------------------------- */
/* Not the embed frame, where the job page's header sits at the same
   position. */

body > div:not(.embed-root) > header {
  border-bottom: 1px solid var(--fun-alpha-3);
}
body > div:not(.embed-root) > header > div {
  height: 64px;
}
/* The dark wordmark, white on the dark header. */
body > div:not(.embed-root) > header img {
  height: 20px;
  width: auto;
  filter: invert(1);
}
body > div:not(.embed-root) > header > div > a:first-child > span {
  display: none;
}

/* Site .nav_menu-link. */
.site-nav {
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.site-nav a {
  border-radius: 999px;
  padding: 0.375rem 0.75rem;
  color: var(--fun-alpha-11);
  line-height: 1.45;
}
.site-nav a:hover {
  background: var(--fun-alpha-3);
  color: var(--fun-fg);
  opacity: 1;
}
/* "Contact" is a plain nav item on the site. */
.site-cta {
  border-radius: 999px;
  background: transparent;
  padding: 0.375rem 0.75rem;
  color: var(--fun-fg);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
}
.site-cta:hover {
  background: var(--fun-alpha-3);
  opacity: 1;
}

/* ---- Hero (hosted careers index) ---------------------------------------- */

main > section:first-child {
  border: 0;
}
main > section:first-child > div {
  padding-top: 6rem;
  padding-bottom: 1rem;
}
main > section:first-child p:first-child {
  display: none;
}
main > section:first-child h1 {
  margin-top: 0;
  font-family: var(--fun-display);
  font-size: clamp(2.375rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
main > section:first-child h1 + p {
  color: var(--fun-muted);
}
.site-hero-cta {
  padding: 0.5625rem 1.25rem;
}

/* ---- Open roles (tabs layout; hosted section and the embed) ------------- */

#open-positions {
  padding-top: 0;
}

.board-tabbed > h2 {
  font-family: var(--fun-display);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.board-notice {
  color: var(--fun-muted);
}

.board-tabs {
  gap: 0.25rem;
  margin-top: 1.5rem;
}
.board-tab {
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0.375rem 0.75rem;
  color: var(--fun-alpha-11);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  transition: background-color 0.2s, color 0.2s;
}
.board-tab:hover {
  background: var(--fun-alpha-3);
  color: var(--fun-fg);
}
.board-tab.is-active,
.board-tab.is-active:hover {
  background: var(--fun-fg-2);
  color: var(--fun-bg);
}

.board-groups {
  margin-top: 0;
  gap: 1rem;
}
.board-groups > * + * {
  margin-top: 0;
}

/* Site .careers-team_header. */
.board-group h3 {
  margin: 0;
  border-bottom: 1px solid var(--fun-border);
  padding: 2rem 0 1rem;
  color: var(--fun-faint);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.49;
  letter-spacing: 0;
  text-transform: none;
}

/* Site .careers-job_row: title | team | location | Learn more. */
.board-rows > * {
  border-top: 0;
  border-bottom: 1px solid var(--fun-border);
}
.board-row {
  display: grid;
  grid-template-columns: 1.25fr 0.5fr 0.5fr auto;
  gap: 1.25rem 2rem;
  align-items: center;
  background: transparent;
  padding: 1.5rem 0;
  color: var(--fun-fg);
}
.board-row:hover {
  background: transparent;
}
.board-row-title {
  font-family: var(--fun-display);
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--fun-fg);
}
.board-row-team,
.board-row-location {
  display: block;
  color: var(--fun-fg);
  font-size: 0.9375rem;
  line-height: 1.49;
}
/* Site .button.is-secondary, replacing the text arrow. Hover on the pill only. */
.board-row-arrow {
  border-radius: 9999px;
  padding: 0.5625rem 1.25rem;
  color: var(--fun-alpha-11);
  font-size: 0;
  font-weight: 500;
  line-height: 1.42;
  transition: background-color 0.2s, color 0.2s;
}
.board-row-arrow::after {
  content: 'Learn more';
  font-size: 0.9375rem;
}
.board-row-arrow:hover {
  background: var(--fun-alpha-3);
  color: var(--fun-fg);
}

@media (max-width: 767px) {
  .board-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1.25rem 0;
  }
  .board-row-title {
    font-size: 1.375rem;
  }
  .board-row-team {
    display: block;
  }
  .board-row-team,
  .board-row-location {
    color: var(--fun-muted);
  }
  .board-row-arrow {
    display: none;
  }
}

.board-cta {
  border-radius: 1.25rem;
  background: var(--fun-surface);
  color: var(--fun-fg);
}
.board-cta h2 {
  font-family: var(--fun-display);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.board-cta p {
  color: var(--fun-muted);
}

/* ---- Embed frame -------------------------------------------------------- */

html:has(> body > .embed-root),
body:has(> .embed-root) {
  background: transparent;
}
.embed-root:has(> .board-tabbed) {
  max-width: none;
  padding: 0;
}
/* The host page has its own "Open roles" heading. */
.embed-root .board-tabbed > h2,
.embed-root .board-notice,
.embed-root .board-cta {
  display: none;
}
.embed-root .board-tabs {
  margin-top: 0;
}

/* ---- Job page (hosted and embedded) ------------------------------------ */

.job-title {
  font-family: var(--fun-display);
  font-weight: 400;
  letter-spacing: -0.03em;
}

.gh-content {
  color: var(--fun-muted);
}
.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content strong,
.gh-content b {
  color: var(--fun-fg); /* globals.css paints headings --brand-navy (= bg here) */
}
.gh-content a {
  color: var(--fun-fg-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.gh-content a:hover {
  color: var(--fun-fg);
}

/* Site .form_input. */
section#apply input:not([type='checkbox']):not([type='radio']):not([type='file']),
section#apply textarea,
section#apply select {
  border-color: var(--fun-input);
  background: var(--fun-input);
  color: var(--fun-fg-2);
}
section#apply input:not([type='checkbox']):not([type='radio']):hover,
section#apply textarea:hover {
  border-color: var(--fun-alpha-3);
}
section#apply input:focus,
section#apply textarea:focus,
section#apply select:focus {
  border-color: var(--fun-alpha-6);
  color: var(--fun-fg);
  outline: none;
  box-shadow: none;
}
section#apply input[type='checkbox'],
section#apply input[type='radio'] {
  accent-color: var(--fun-fg-2);
}

/* ---- Surface / text re-maps ----------------------------------------------- */

.bg-white:not(.pg-admin *) {
  background-color: var(--fun-surface);
}
.bg-white\/80:not(.pg-admin *) {
  background-color: rgba(25, 25, 25, 0.8);
}
.bg-slate-50:not(.pg-admin *) {
  background-color: #111111;
}
.bg-slate-100:not(.pg-admin *) {
  background-color: var(--fun-surface-2);
}
.hover\:bg-slate-50:hover:not(.pg-admin *),
.hover\:bg-slate-100:hover:not(.pg-admin *) {
  background-color: var(--fun-surface-2);
}
.bg-slate-900:not(.pg-admin *) {
  background-color: #000000; /* demo-payload <pre> */
}
.bg-yellow-100:not(.pg-admin *) {
  background-color: rgba(255, 255, 255, 0.18); /* search-hit <mark> */
}
.file\:bg-slate-100:not(.pg-admin *)::file-selector-button {
  background-color: var(--fun-surface-2);
}
.hover\:file\:bg-slate-200:hover:not(.pg-admin *)::file-selector-button {
  background-color: var(--fun-input);
}
.file\:text-slate-700:not(.pg-admin *)::file-selector-button {
  color: var(--fun-fg);
}

.text-slate-900:not(.pg-admin *),
.text-slate-800:not(.pg-admin *),
.text-slate-100:not(.pg-admin *) {
  color: var(--fun-fg);
}
.text-slate-700:not(.pg-admin *) {
  color: var(--fun-fg-2);
}
.text-slate-600:not(.pg-admin *),
.text-slate-500:not(.pg-admin *),
.text-slate-300:not(.pg-admin *) {
  color: var(--fun-muted);
}
.text-slate-400:not(.pg-admin *) {
  color: var(--fun-faint);
}
.hover\:text-slate-900:hover:not(.pg-admin *),
.hover\:text-slate-700:hover:not(.pg-admin *) {
  color: var(--fun-fg);
}
.placeholder\:text-slate-400:not(.pg-admin *)::placeholder {
  color: var(--fun-alpha-9);
}

/* ---- Border / focus re-maps ----------------------------------------------- */

.border-slate-100:not(.pg-admin *),
.border-slate-200:not(.pg-admin *) {
  border-color: var(--fun-border);
}
.border-slate-300:not(.pg-admin *) {
  border-color: var(--fun-input);
}
.divide-slate-200:not(.pg-admin *) > :not(:last-child) {
  border-color: var(--fun-border);
}
.focus\:border-slate-500:focus:not(.pg-admin *) {
  border-color: var(--fun-alpha-6);
}
.focus\:ring-slate-400:focus:not(.pg-admin *),
.focus\:ring-slate-500:focus:not(.pg-admin *) {
  --tw-ring-color: rgba(255, 255, 255, 0.25);
}
.focus\:ring-\[var\(--brand-blue\)\]\/20:focus:not(.pg-admin *) {
  --tw-ring-color: rgba(255, 255, 255, 0.2);
}

/* ---- Status tints on a dark surface -------------------------------------- */

.bg-emerald-50:not(.pg-admin *) {
  background-color: rgba(16, 185, 129, 0.1);
}
.bg-emerald-100:not(.pg-admin *) {
  background-color: rgba(16, 185, 129, 0.16);
}
.border-emerald-200:not(.pg-admin *),
.border-emerald-300:not(.pg-admin *) {
  border-color: rgba(16, 185, 129, 0.35);
}
.text-emerald-900:not(.pg-admin *),
.text-emerald-800:not(.pg-admin *),
.text-emerald-700:not(.pg-admin *) {
  color: #6ee7b7;
}
.text-emerald-600:not(.pg-admin *) {
  color: #34d399;
}

.bg-amber-50:not(.pg-admin *) {
  background-color: rgba(245, 158, 11, 0.1);
}
.border-amber-300:not(.pg-admin *) {
  border-color: rgba(245, 158, 11, 0.4);
}
.text-amber-900:not(.pg-admin *) {
  color: #fcd34d;
}

.bg-rose-50:not(.pg-admin *) {
  background-color: rgba(244, 63, 94, 0.1);
}
.border-rose-300:not(.pg-admin *) {
  border-color: rgba(244, 63, 94, 0.4);
}
.text-rose-900:not(.pg-admin *),
.text-rose-800:not(.pg-admin *),
.text-rose-700:not(.pg-admin *),
.text-rose-600:not(.pg-admin *),
.text-rose-500:not(.pg-admin *) {
  color: #fda4af;
}
.hover\:text-rose-600:hover:not(.pg-admin *) {
  color: #fecdd3;
}